// @File: frontend/src/components/ui/Sep.tsx
// @Desc: Small decorative/meta separator used in headings, banners, top bars
//        and chat headers in place of long em/en dashes. Use variant="decor"
//        (star) for hero/banner/chat headers, variant="meta" (pipe) for
//        compact strips, stats, breadcrumbs, etc.
import React from "react";

export const Sep: React.FC<{ variant?: "decor" | "meta"; className?: string }> = ({
  variant = "decor",
  className = "",
}) => (
  <span
    aria-hidden
    className={
      (variant === "decor"
        ? "mx-2 text-primary/70"
        : "mx-1.5 text-muted-foreground/60") +
      (className ? " " + className : "")
    }
  >
    {variant === "decor" ? "✦" : "|"}
  </span>
);

export default Sep;