'use client';

import { FormState, UseFormSetValue, UseFormWatch } from 'react-hook-form';
import { RegistrationFormData } from '@/lib/validations/registration';
import { STACKS } from '@/constants/form-data';
import { CheckCircle } from 'lucide-react';

interface Props {
  errors: FormState<RegistrationFormData>['errors'];
  setValue: UseFormSetValue<RegistrationFormData>;
  watch: UseFormWatch<RegistrationFormData>;
}

export default function StepTrack({ errors, setValue, watch }: Props) {
  const selectedStack = watch('stack');

  return (
    <div className="space-y-5 animate-in fade-in slide-in-from-right-4 duration-300">
      <div className="mb-1">
        <h3 className="text-lg font-bold text-gray-900">Choose Your Track</h3>
        <p className="text-xs text-gray-400 mt-0.5">Pick the skill you want to master over 3 months</p>
      </div>
      {errors.stack && <p className="text-xs text-red-500">{errors.stack.message}</p>}
      <div className="grid grid-cols-1 gap-2.5">
        {STACKS.map((stack) => {
          const isSelected = selectedStack === stack.id;
          return (
            <button
              key={stack.id}
              type="button"
              onClick={() =>
                setValue('stack', stack.id as RegistrationFormData['stack'], { shouldValidate: true })
              }
              className={`flex items-center gap-4 p-4 rounded-xl border-2 text-left transition-all duration-200 ${
                isSelected
                  ? 'border-gray-900 bg-gray-900 text-white shadow-md'
                  : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'
              }`}
            >
              <span className="text-xl leading-none">{stack.icon}</span>
              <div className="flex-1 min-w-0">
                <p className={`font-semibold text-sm ${isSelected ? 'text-white' : 'text-gray-900'}`}>
                  {stack.label}
                </p>
                <p className={`text-xs mt-0.5 truncate ${isSelected ? 'text-gray-300' : 'text-gray-500'}`}>
                  {stack.description}
                </p>
              </div>
              {isSelected && <CheckCircle className="w-4 h-4 text-orange-400 flex-shrink-0" />}
            </button>
          );
        })}
      </div>
    </div>
  );
}