import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

interface UserData {
  name: string;
  institution: string;
  sscRoll: string;
  hscRoll: string;
  email: string;
  phone: string;
}

interface ProfileManagerProps {
  userData: UserData | undefined;
  edit: boolean;
  setUserData: React.Dispatch<React.SetStateAction<UserData | undefined>>;
}

export default function ProfileManager({
  userData,
  edit,
  setUserData,
}: ProfileManagerProps) {
  if (!userData) return null;

  const handleChange = (field: keyof UserData, value: string) => {
    setUserData((prev) => (prev ? { ...prev, [field]: value } : prev));
  };

  return (
    <div className="mx-auto">
      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name" className="text-sm font-semibold text-gray-700">
            Name
          </Label>
          <Input
            id="name"
            type="text"
            value={userData.name}
            onChange={(e) => handleChange("name", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>

        <div className="space-y-2">
          <Label
            htmlFor="institution"
            className="text-sm font-semibold text-gray-700"
          >
            Institution
          </Label>
          <Input
            id="institution"
            type="text"
            value={userData.institution}
            onChange={(e) => handleChange("institution", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>

        <div className="flex gap-4">
          <div className="space-y-2 w-full">
            <Label
              htmlFor="sscRoll"
              className="text-sm font-semibold text-gray-700"
            >
              SSC Roll
            </Label>
            <Input
              id="sscRoll"
              type="text"
              value={userData.sscRoll}
              onChange={(e) => handleChange("sscRoll", e.target.value)}
              className="bg-gray-50 py-6"
              readOnly={!edit}
            />
          </div>

          <div className="space-y-2 w-full">
            <Label
              htmlFor="hscRoll"
              className="text-sm font-semibold text-gray-700"
            >
              HSC Roll
            </Label>
            <Input
              id="hscRoll"
              type="text"
              value={userData.hscRoll}
              onChange={(e) => handleChange("hscRoll", e.target.value)}
              className="bg-gray-50 py-6"
              readOnly={!edit}
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label
            htmlFor="email"
            className="text-sm font-semibold text-gray-700"
          >
            Email
          </Label>
          <Input
            id="email"
            type="email"
            value={userData.email}
            onChange={(e) => handleChange("email", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>

        <div className="space-y-2">
          <Label
            htmlFor="phone"
            className="text-sm font-semibold text-gray-700"
          >
            Phone
          </Label>
          <Input
            id="phone"
            type="tel"
            value={userData.phone}
            onChange={(e) => handleChange("phone", e.target.value)}
            className="bg-gray-50 py-6"
            readOnly={!edit}
          />
        </div>
      </div>
    </div>
  );
}