import { AlertTriangle } from "lucide-react";

export default function DebutLineDivider() {
  return (
    <div className="my-4 relative flex items-center justify-center" role="separator">
      <div
        aria-hidden
        className="absolute inset-x-0 h-px"
        style={{
          background:
            "linear-gradient(90deg, transparent 0%, rgba(236,72,153,0.6) 50%, transparent 100%)",
          boxShadow: "0 0 12px rgba(236,72,153,0.4)",
        }}
      />

      <div className="relative bg-deep px-4 py-1.5 rounded-full border border-pink-500/45 inline-flex items-center gap-2 backdrop-blur-md">
        <AlertTriangle size={11} className="text-pink-400" />
        <span className="font-label text-[10px] tracking-[0.3em] uppercase text-pink-400">
          出道线 · Debut Line
        </span>
      </div>
    </div>
  );
}
