import { Link } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { RolesList } from '../components/RolesList'

export function RolesPage() {
  return (
    <div className="flex justify-center py-8">
      <Card className="w-full max-w-4xl">
        <CardHeader className="flex flex-row items-center justify-between space-y-0">
          <div className="space-y-1">
            <CardTitle className="text-xl">Roles del sistema</CardTitle>
            <CardDescription>
              Gestión de roles canónicos. Los roles inactivos no pueden asignarse a nuevos usuarios.
            </CardDescription>
          </div>
          <Link to="/admin/roles/nuevo">
            <Button>Nuevo rol</Button>
          </Link>
        </CardHeader>
        <CardContent>
          <RolesList />
        </CardContent>
      </Card>
    </div>
  )
}
