Decorative separators

"use client"

import * as React from "react"

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

/* Decorative separator family: 5 ornamented horizontal separators. The shared idea
   is INLINE SVG: zigzag, wave and chevron spread across the full width with a
   repeating SVG pattern; diamond and star break the line with an ornament in the
   middle. The SVG colors come ONLY through currentColor, and the color is decided
   by the token class on the root element (text-border / text-muted-foreground). The
   pattern ids are unique per instance via React.useId: with 25 examples side by
   side on the same page an id collision would lead to the wrong pattern reference.
   No motion, entirely static and deterministic. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type Props = React.ComponentProps<"div"> & { size?: StyledSize }

/* SVG serit yuksekligi (px): sus ne kadar iri cizilecek. */
const band: Record<StyledSize, number> = { sm: 6, md: 8, lg: 10, xl: 12 }

/* Cizgi kalinligi (px). */
const stroke: Record<StyledSize, number> = { sm: 1, md: 1.25, lg: 1.5, xl: 2 }

/* Diamond/Star gibi orta suslerin capi (px). */
const glyph: Record<StyledSize, number> = { sm: 8, md: 10, lg: 12, xl: 14 }

/* Diamond/Star kenar cizgisinin kalinligi. */
const rail: Record<StyledSize, string> = {
  sm: "h-px",
  md: "h-px",
  lg: "h-0.5",
  xl: "h-0.5",
}

/* useId contains ":"; it is stripped for the url(#...) reference. */
function usePatternId(prefix: string) {
  const raw = React.useId()
  return `${prefix}-${raw.replace(/:/g, "")}`
}

/* A shared SVG shell that spreads the repeating pattern across the full width. */
function PatternRule({
  id,
  height,
  tileWidth,
  children,
}: {
  id: string
  height: number
  tileWidth: number
  children: React.ReactNode
}) {
  return (
    <svg
      aria-hidden="true"
      focusable="false"
      width="100%"
      height={height}
      className="block w-full"
    >
      <defs>
        <pattern
          id={id}
          patternUnits="userSpaceOnUse"
          width={tileWidth}
          height={height}
        >
          {children}
        </pattern>
      </defs>
      <rect width="100%" height={height} fill={`url(#${id})`} />
    </svg>
  )
}

/* Zigzag: a broken line in a sawtooth rhythm. */
export function ZigzagSeparator({ className, size = "md", ...props }: Props) {
  const id = usePatternId("zigzag")
  const h = band[size]
  const s = stroke[size]
  const w = h * 2
  const top = s
  const bottom = h - s
  const d = `M0 ${bottom} L ${w / 4} ${top} L ${w / 2} ${bottom} L ${(w * 3) / 4} ${top} L ${w} ${bottom}`
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn("w-full text-border", className)}
      {...props}
    >
      <PatternRule id={id} height={h} tileWidth={w}>
        <path d={d} fill="none" stroke="currentColor" strokeWidth={s} />
      </PatternRule>
    </div>
  )
}

/* Wave: yumusak sinus dalgasi. */
export function WaveSeparator({ className, size = "md", ...props }: Props) {
  const id = usePatternId("wave")
  const h = band[size]
  const s = stroke[size]
  const w = h * 3
  const mid = h / 2
  const d = `M0 ${mid} Q ${w / 4} ${s}, ${w / 2} ${mid} T ${w} ${mid}`
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn("w-full text-border", className)}
      {...props}
    >
      <PatternRule id={id} height={h} tileWidth={w}>
        <path d={d} fill="none" stroke="currentColor" strokeWidth={s} />
      </PatternRule>
    </div>
  )
}

/* Chevron: saga bakan ok ucu dizisi. */
export function ChevronSeparator({ className, size = "md", ...props }: Props) {
  const id = usePatternId("chevron")
  const h = band[size]
  const s = stroke[size]
  const w = h
  const top = s
  const bottom = h - s
  const d = `M ${s} ${top} L ${w - s} ${h / 2} L ${s} ${bottom}`
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn("w-full text-border", className)}
      {...props}
    >
      <PatternRule id={id} height={h} tileWidth={w}>
        <path
          d={d}
          fill="none"
          stroke="currentColor"
          strokeWidth={s}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </PatternRule>
    </div>
  )
}

/* Diamond: a line broken in the middle by a solid diamond. */
export function DiamondSeparator({ className, size = "md", ...props }: Props) {
  const d = glyph[size]
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn("flex w-full items-center gap-3 text-border", className)}
      {...props}
    >
      <span className={cn("flex-1 bg-border", rail[size])} />
      <svg
        aria-hidden="true"
        focusable="false"
        width={d}
        height={d}
        viewBox="0 0 10 10"
        className="shrink-0"
      >
        <polygon points="5,0 10,5 5,10 0,5" fill="currentColor" />
      </svg>
      <span className={cn("flex-1 bg-border", rail[size])} />
    </div>
  )
}

/* Star: a line broken in the middle by a five-pointed star. */
export function StarSeparator({ className, size = "md", ...props }: Props) {
  const d = glyph[size] + 2
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn(
        "flex w-full items-center gap-3 text-muted-foreground",
        className
      )}
      {...props}
    >
      <span className={cn("flex-1 bg-border", rail[size])} />
      <svg
        aria-hidden="true"
        focusable="false"
        width={d}
        height={d}
        viewBox="0 0 24 24"
        className="shrink-0"
      >
        <polygon
          points="12,1 15,8.9 23.4,9.4 16.9,14.8 19,23 12,18.4 5,23 7.1,14.8 0.6,9.4 9,8.9"
          fill="currentColor"
        />
      </svg>
      <span className={cn("flex-1 bg-border", rail[size])} />
    </div>
  )
}