import { useNavigate } from 'react-router-dom'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { CreateRolForm } from '../components/RolForm'

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

  return (
    <div className="flex justify-center py-8">
      <Card className="w-full max-w-lg">
        <CardHeader className="space-y-1">
          <CardTitle className="text-xl">Nuevo rol</CardTitle>
          <CardDescription>
            Creá un nuevo rol del sistema. El código es inmutable una vez creado.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <CreateRolForm onSuccess={() => navigate('/admin/roles')} />
        </CardContent>
      </Card>
    </div>
  )
}
