import { cn } from '@/lib/utils';

/**
 * Ambient background accents (soft diamonds + circles) used behind auth
 * and empty-state screens. Purely decorative — keep pointer-events-none.
 */
export function DecorativeShapes({ className }: { className?: string }) {
  return (
    <div
      aria-hidden
      className={cn('pointer-events-none fixed inset-0 overflow-hidden', className)}
    >
      <div className="absolute -top-24 -right-24 h-72 w-72 rounded-full bg-primary/10 blur-3xl" />
      <div className="absolute -bottom-32 -left-24 h-80 w-80 rounded-full bg-secondary/15 blur-3xl" />
      <div className="absolute top-1/3 left-1/2 h-64 w-64 -translate-x-1/2 rounded-full bg-success/5 blur-3xl" />

      <div className="absolute top-16 left-[12%] h-10 w-10 rotate-45 rounded-xl bg-secondary/25" />
      <div className="absolute top-40 right-[15%] h-16 w-16 rotate-45 rounded-2xl gradient-primary opacity-15" />
      <div className="absolute bottom-24 right-[20%] h-6 w-6 rotate-45 rounded-md bg-warning/30" />
      <div className="absolute bottom-40 left-[18%] h-8 w-8 rounded-full border-2 border-primary/20" />
      <div className="absolute top-[45%] right-[8%] h-5 w-5 rounded-full bg-success/30" />
    </div>
  );
}