gridpilot.gg/apps/website/components/onboarding/PersonalInfoStep.tsx

import { User, Clock, ChevronRight } from 'lucide-react';
import Input from '@/ui/Input';
import Heading from '@/ui/Heading';
import CountrySelect from '@/ui/CountrySelect';

export interface PersonalInfo {
  firstName: string;
  lastName: string;
  displayName: string;
  country: string;
  timezone: string;
}

interface FormErrors {
  [key: string]: string | undefined;
}

interface PersonalInfoStepProps {
  personalInfo: PersonalInfo;
  setPersonalInfo: (info: PersonalInfo) => void;
  errors: FormErrors;
  loading: boolean;
}

const TIMEZONES = [
  { value: 'America/New_York', label: 'Eastern Time (ET)' },
  { value: 'America/Chicago', label: 'Central Time (CT)' },
  { value: 'America/Denver', label: 'Mountain Time (MT)' },
  { value: 'America/Los_Angeles', label: 'Pacific Time (PT)' },
  { value: 'Europe/London', label: 'Greenwich Mean Time (GMT)' },
  { value: 'Europe/Berlin', label: 'Central European Time (CET)' },
  { value: 'Europe/Paris', label: 'Central European Time (CET)' },
  { value: 'Australia/Sydney', label: 'Australian Eastern Time (AET)' },
  { value: 'Asia/Tokyo', label: 'Japan Standard Time (JST)' },
  { value: 'America/Sao_Paulo', label: 'Brasília Time (BRT)' },
];

export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loading }: PersonalInfoStepProps) {
  return (
    <div className="space-y-6">
      <div>
        <Heading level={2} className="text-xl mb-1 flex items-center gap-2">
          <User className="w-5 h-5 text-primary-blue" />
          Personal Information
        </Heading>
        <p className="text-sm text-gray-400">
          Tell us a bit about yourself
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label htmlFor="firstName" className="block text-sm font-medium text-gray-300 mb-2">
            First Name *
          </label>
          <Input
            id="firstName"
            type="text"
            value={personalInfo.firstName}
            onChange={(e) =>
              setPersonalInfo({ ...personalInfo, firstName: e.target.value })
            }
            error={!!errors.firstName}
            errorMessage={errors.firstName}
            placeholder="John"
            disabled={loading}
          />
        </div>

        <div>
          <label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
            Last Name *
          </label>
          <Input
            id="lastName"
            type="text"
            value={personalInfo.lastName}
            onChange={(e) =>
              setPersonalInfo({ ...personalInfo, lastName: e.target.value })
            }
            error={!!errors.lastName}
            errorMessage={errors.lastName}
            placeholder="Racer"
            disabled={loading}
          />
        </div>
      </div>

      <div>
        <label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
          Display Name * <span className="text-gray-500 font-normal">(shown publicly)</span>
        </label>
        <Input
          id="displayName"
          type="text"
          value={personalInfo.displayName}
          onChange={(e) =>
            setPersonalInfo({ ...personalInfo, displayName: e.target.value })
          }
          error={!!errors.displayName}
          errorMessage={errors.displayName}
          placeholder="SpeedyRacer42"
          disabled={loading}
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label htmlFor="country" className="block text-sm font-medium text-gray-300 mb-2">
            Country *
          </label>
          <CountrySelect
            value={personalInfo.country}
            onChange={(value) =>
              setPersonalInfo({ ...personalInfo, country: value })
            }
            error={!!errors.country}
            errorMessage={errors.country ?? ''}
            disabled={loading}
          />
        </div>

        <div>
          <label htmlFor="timezone" className="block text-sm font-medium text-gray-300 mb-2">
            Timezone
          </label>
          <div className="relative">
            <Clock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 z-10" />
            <select
              id="timezone"
              value={personalInfo.timezone}
              onChange={(e) =>
                setPersonalInfo({ ...personalInfo, timezone: e.target.value })
              }
              className="block w-full rounded-md border-0 px-4 py-3 pl-10 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm appearance-none cursor-pointer"
              disabled={loading}
            >
              <option value="">Select timezone</option>
              {TIMEZONES.map((tz) => (
                <option key={tz.value} value={tz.value}>
                  {tz.label}
                </option>
              ))}
            </select>
            <ChevronRight className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 rotate-90" />
          </div>
        </div>
      </div>
    </div>
  );
}