import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import type { EditProfileFormData } from './types';

interface EditProfileIdentityCardProps {
  formData: EditProfileFormData;
  setFormField: <K extends keyof EditProfileFormData>(
    key: K,
    value: EditProfileFormData[K],
  ) => void;
}

export function EditProfileIdentityCard({
  formData,
  setFormField,
}: EditProfileIdentityCardProps) {
  return (
    <Card variant="default">
      <h3 className="font-bold text-foreground mb-6 border-b border-border pb-2 tracking-tight">
        Identity
      </h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <Input
          label="Username"
          value={formData.username}
          onChange={(e) => setFormField('username', e.target.value)}
        />
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <Input
          label="First Name"
          value={formData.first_name}
          onChange={(e) => setFormField('first_name', e.target.value)}
        />
        <Input
          label="Last Name"
          value={formData.last_name}
          onChange={(e) => setFormField('last_name', e.target.value)}
        />
      </div>
      <div className="mb-4">
        <label className="block text-sm font-medium text-muted-foreground mb-2">
          Bio
        </label>
        <textarea
          className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none min-h-24 transition-colors duration-[var(--duration-normal)]"
          value={formData.bio}
          onChange={(e) => setFormField('bio', e.target.value)}
          maxLength={500}
        />
        <p className="text-xs text-muted-foreground text-right mt-1">
          {formData.bio.length}/500
        </p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Input
          label="Location"
          value={formData.location}
          onChange={(e) => setFormField('location', e.target.value)}
        />
        <div>
          <label className="block text-sm font-medium text-muted-foreground mb-2">
            Gender
          </label>
          <select
            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
            value={formData.gender}
            onChange={(e) => setFormField('gender', e.target.value)}
          >
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
            <option>Prefer not to say</option>
          </select>
        </div>
      </div>
    </Card>
  );
}