import type React from "react";
import { Card, Input, Space } from "antd";
import { useEffect, useState } from "react";

interface SettingProps {
  className?: string;
}

const Setting: React.FC<SettingProps> = ({ className }) => {
  const [email, setEmail] = useState<string>('');
  const [key, setKey] = useState<string>('');

  useEffect(() => {
    const savedEmail = localStorage.getItem('userEmail');
    const savedKey = localStorage.getItem('userKey');
    if (savedEmail) {
      setEmail(savedEmail);
    }
    if (savedKey) {
      setKey(savedKey);
    }
  }, []);

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setEmail(value);
    localStorage.setItem('userEmail', value);
  };

  const handleKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setKey(value);
    localStorage.setItem('userKey', value);
  };

  return (
    <Card
      title="设置"
      className={`${className} size-full flex flex-col gap-y-2`}
    >
      <Space direction="vertical">
        <Input
          addonBefore="邮箱"
          value={email}
          onChange={handleEmailChange}
          placeholder="请输入您的Git邮箱"
        />
        <Input.Password 
          addonBefore="Key" 
          value={key}
          onChange={handleKeyChange}
          placeholder="请输入您的Key"
        />
      </Space>
    </Card>
  );
};

export default Setting;