import { useNavigate } from 'react-router-dom'
import { UserForm } from '../components/UserForm'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import type { CreatedUserDto } from '../api/createUser'

export function CreateUserPage() {
  const navigate = useNavigate()

  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- el callback recibe CreatedUserDto por contrato de UserForm pero solo necesitamos navegar
  function handleSuccess(_created: CreatedUserDto) {
    void navigate('/')
  }

  return (
    <div className="flex justify-center py-8">
      <Card className="w-full max-w-lg">
        <CardHeader className="space-y-1">
          <CardTitle className="text-xl">Crear Usuario</CardTitle>
          <CardDescription>
            Completá los datos para registrar un nuevo usuario en el sistema.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <UserForm onSuccess={handleSuccess} />
        </CardContent>
      </Card>
    </div>
  )
}
