Divider

import { Button } from "@/registry/ds/button";
import { Divider } from "@/registry/ds/divider";
import { ArrowLeft, ArrowRight, Plus } from "@/registry/ds/icons";

/** Tres usos: vertical para separar grupos en una barra, subtle entre filas de una lista, y con texto entre dos caminos */
export default function DividerLayout() {
  return (
    <div className="flex w-full max-w-md flex-col gap-8">
      <div className="flex h-9 items-center gap-3">
        <Button size="sm" variant="stroke" iconOnly={<ArrowLeft />} aria-label="Semana anterior" />
        <Button size="sm" variant="stroke" iconOnly={<ArrowRight />} aria-label="Semana siguiente" />
        <Divider orientation="vertical" />
        <span className="text-sm font-medium text-fg">Semana 12</span>
        <Divider orientation="vertical" />
        <Button size="sm" variant="text" iconLeft={<Plus />}>
          Evento
        </Button>
      </div>

      <ul className="text-sm">
        {[
          ["Cálculo II", "Lun 8:00"],
          ["Física I", "Mar 14:00"],
          ["Álgebra", "Jue 8:00"],
        ].map(([m, h], i) => (
          <li key={m}>
            {i > 0 && <Divider variant="subtle" />}
            <div className="flex justify-between py-2.5">
              <span className="font-medium text-fg">{m}</span>
              <span className="text-fg-muted">{h}</span>
            </div>
          </li>
        ))}
      </ul>

      <div className="flex flex-col gap-3">
        <Button fullWidth>Ingresar con correo</Button>
        <Divider>o</Divider>
        <Button fullWidth variant="stroke">
          Continuar con cuenta institucional
        </Button>
      </div>
    </div>
  );
}