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;
}

export default function ProfileManager({
  userData,
  edit,
}: ProfileManagerProps) {
  return (
    <div className="mx-auto">
      <div className="space-y-4">
        <div className="space-y-2">
          <Label
            htmlFor="name"
            className="text-sm font-semibold tracking-tighter text-gray-700"
          >
            Name
          </Label>
          <Input
            id="name"
            type="text"
            value={userData?.name}
            readOnly
            className="bg-gray-50 cursor-default py-6"
            disabled={!edit}
          />
        </div>

        <div className="space-y-2">
          <Label
            htmlFor="institution"
            className="text-sm font-semibold tracking-tighter text-gray-700"
          >
            Institution
          </Label>
          <Input
            id="institution"
            type="text"
            value={userData?.institution}
            readOnly
            className="bg-gray-50 cursor-default py-6"
            disabled={!edit}
          />
        </div>

        <div className="flex gap-4">
          <div className="space-y-2">
            <Label
              htmlFor="sscRoll"
              className="text-sm font-semibold tracking-tighter  text-gray-700"
            >
              SSC Roll
            </Label>
            <Input
              id="sscRoll"
              type="text"
              value={userData?.sscRoll}
              readOnly
              className="bg-gray-50 cursor-default py-6"
              disabled={!edit}
            />
          </div>

          <div className="space-y-2">
            <Label
              htmlFor="hscRoll"
              className="text-sm font-semibold tracking-tighter  text-gray-700"
            >
              HSC Roll
            </Label>
            <Input
              id="hscRoll"
              type="text"
              value={userData?.hscRoll}
              readOnly
              className="bg-gray-50 cursor-default py-6"
              disabled={!edit}
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label
            htmlFor="email"
            className="text-sm font-semibold tracking-tighter text-gray-700"
          >
            Email
          </Label>
          <Input
            id="email"
            type="email"
            value={userData?.email}
            readOnly
            className="bg-gray-50 cursor-default  py-6"
            disabled={!edit}
          />
        </div>

        <div className="space-y-2">
          <Label
            htmlFor="phone"
            className="text-sm font-semibold tracking-tighter  text-gray-700"
          >
            Phone
          </Label>
          <Input
            id="phone"
            type="tel"
            value={userData?.phone}
            readOnly
            className="bg-gray-50 cursor-default py-6"
            disabled={!edit}
          />
        </div>
      </div>
    </div>
  );
}