import * as React from "react"
import { Separator as SeparatorPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        // Las variantes tienen que apuntar a `data-orientation`, que es el
        // atributo que emite Radix. Con `data-horizontal:` / `data-vertical:`
        // Tailwind genera `[data-horizontal]` y `[data-vertical]`, que no
        // existen: el separador se renderiza sin ancho ni alto y no se ve.
        // Dos correcciones sobre lo que entrega el registro con el estilo
        // `radix-nova`, las dos comprobadas midiendo el elemento en pantalla:
        //
        // 1. Las variantes apuntan a `data-orientation`, que es el atributo que
        //    emite Radix. `data-horizontal:` y `data-vertical:` generan
        //    `[data-horizontal]` y `[data-vertical]`, que no existen, así que el
        //    ancho del vertical y el alto del horizontal no se aplicaban nunca.
        // 2. El alto va con `h-full` y no con `self-stretch`: sobre un elemento
        //    con altura ya definida, `align-self: stretch` deja de estirar y se
        //    comporta como `flex-start`, y el separador queda pegado arriba.
        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:h-full",
        className
      )}
      {...props}
    />
  )
}

export { Separator }