"use client";

import * as React from "react";
import { FormState } from "../types";
import { EMPLOYEE_OPTIONS } from "../constants";
import { motion } from "framer-motion";
import { Building2, Users } from "lucide-react";
import { Reveal } from "../../Reveal";
import { Input } from "../components/Input";

interface CompanyStepProps {
  state: FormState;
  updateState: (_updates: Partial<FormState>) => void;
}

export function CompanyStep({ state, updateState }: CompanyStepProps) {
  return (
    <div className="space-y-6">
      <Reveal width="100%" delay={0.1}>
        <div className="space-y-4" id="focus-target-company">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-slate-50 rounded-xl flex items-center justify-center text-black">
              <Building2 size={16} />
            </div>
            <h4 className="text-lg font-bold text-slate-900">Unternehmen</h4>
            <span className="px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
              Erforderlich
            </span>
          </div>
          <Input
            label="Name des Unternehmens"
            placeholder="z.B. Muster GmbH"
            value={state.companyName}
            onChange={(e) => updateState({ companyName: e.target.value })}
          />
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.2}>
        <div className="space-y-4">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 bg-slate-50 rounded-xl flex items-center justify-center text-black">
              <Users size={16} />
            </div>
            <h4 className="text-lg font-bold text-slate-900">
              Mitarbeiteranzahl
            </h4>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {EMPLOYEE_OPTIONS.map((option) => (
              <motion.button
                key={option.id}
                whileHover={{ y: -3 }}
                whileTap={{ scale: 0.95 }}
                type="button"
                onClick={() => updateState({ employeeCount: option.id })}
                className={`p-4 rounded-xl border-2 transition-all duration-300 font-bold text-sm ${
                  state.employeeCount === option.id
                    ? "border-slate-900 bg-slate-900 text-white"
                    : "border-slate-100 bg-white hover:border-slate-300 text-slate-600"
                }`}
              >
                {option.label}
              </motion.button>
            ))}
          </div>
        </div>
      </Reveal>
    </div>
  );
}
