Horse Availability

const [disponible, setDisponible] = useState(true);

{caballo && (
  <div className="flex items-center gap-3">
    <Switch
      id="disponible"
      checked={disponible}
      onCheckedChange={setDisponible}
    />
    <Label htmlFor="disponible">Está disponible</Label>
  </div>
)}

<Select value={caballoId} onValueChange={setCaballoId}>
  <SelectTrigger>
    <SelectValue placeholder="Seleccionar caballo" />
  </SelectTrigger>
  <SelectContent>
    {caballos.map((c: Caballo) => (
      <SelectItem key={c.id} value={String(c.id)}>
        {c.nombre}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

useEffect(() => {
  if (!clase && alumnoId) {
    const alumno = alumnosValidos.find((a) => a.id === Number(alumnoId));
    if (alumno?.caballoPropio) {
      const id =
        typeof alumno.caballoPropio === "number"
          ? alumno.caballoPropio
          : alumno.caballoPropio.id;
      setCaballoId(String(id));
    }
  }
}, [alumnoId, clase, alumnosValidos]);

<StatusBadge status={row.disponible ? "success" : "default"}>
  {row.disponible ? "Disponible" : "No Disponible"}
</StatusBadge>

{
  name: "disponible",
  label: "Disponibilidad",
  type: "select" as const,
  options: [
    { label: "Disponible", value: "true" },
    { label: "No Disponible", value: "false" },
  ],
}

const filteredData = useMemo(() => {
  return caballos.filter((caballo: Caballo) => {
    if (filters.tipo !== "all" && caballo.tipo !== filters.tipo) {
      return false;
    }
    if (
      filters.disponible !== "all" &&
      String(caballo.disponible) !== filters.disponible
    ) {
      return false;
    }
    return true;
  });
}, [caballos, filters]);