import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Eye, EyeOff, Loader2 } from "lucide-react";
import { LoginFormData } from "@/types/auth";
import { ErrorMessage } from "./ErrorMessage";

interface LoginFormProps {
  formData: LoginFormData;
  isLoading: boolean;
  error: string;
  showPassword: boolean;
  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSubmit: (e: React.FormEvent) => void;
  onTogglePassword: () => void;
}

/**
 * 로그인 폼 컴포넌트
 */
export function LoginForm({
  formData,
  isLoading,
  error,
  showPassword,
  onInputChange,
  onSubmit,
  onTogglePassword,
}: LoginFormProps) {
  return (
    <div className="rounded-2xl border border-border/60 bg-white p-8 shadow-sm dark:bg-card">
      <div className="mb-6 text-center">
        <h2 className="text-xl font-bold text-foreground">로그인</h2>
        <p className="mt-1 text-sm text-muted-foreground">계정 정보를 입력해주세요</p>
      </div>

      <ErrorMessage message={error} />

      <form onSubmit={onSubmit} className="space-y-5">
        <div className="space-y-1.5">
          <label htmlFor="userId" className="text-[13px] font-medium text-foreground/80">
            사용자 ID
          </label>
          <Input
            id="userId"
            name="userId"
            type="text"
            placeholder="ID를 입력하세요"
            value={formData.userId}
            onChange={onInputChange}
            disabled={isLoading}
            className="h-12 rounded-xl border-border/60 bg-muted/30 text-sm placeholder:text-muted-foreground/50 focus:border-primary focus:bg-white focus:ring-1 focus:ring-primary/20"
            required
          />
        </div>

        <div className="space-y-1.5">
          <label htmlFor="password" className="text-[13px] font-medium text-foreground/80">
            비밀번호
          </label>
          <div className="relative">
            <Input
              id="password"
              name="password"
              type={showPassword ? "text" : "password"}
              placeholder="비밀번호를 입력하세요"
              value={formData.password}
              onChange={onInputChange}
              disabled={isLoading}
              className="h-12 rounded-xl border-border/60 bg-muted/30 pr-10 text-sm placeholder:text-muted-foreground/50 focus:border-primary focus:bg-white focus:ring-1 focus:ring-primary/20"
              required
            />
            <button
              type="button"
              onClick={onTogglePassword}
              className="absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground/60 transition-colors hover:text-foreground"
              disabled={isLoading}
            >
              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </button>
          </div>
        </div>

        <Button
          type="submit"
          className="h-12 w-full rounded-xl text-[15px] font-semibold shadow-none"
          disabled={isLoading}
        >
          {isLoading ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              로그인 중...
            </>
          ) : (
            "로그인"
          )}
        </Button>
      </form>
    </div>
  );
}
