/**
 * PlayerBarGlass — Glassmorphism container (KŌDŌ v3)
 * backdrop-blur + oklch tokens + gradient overlay
 */

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

interface PlayerBarGlassProps {
  children: React.ReactNode;
  isHovered: boolean;
  className?: string;
}

export function PlayerBarGlass({
  children,
  isHovered,
  className,
}: PlayerBarGlassProps) {
  return (
    <div
      className={cn(
        'relative w-full rounded-2xl overflow-hidden',
        'backdrop-blur-2xl',
        'bg-[oklch(0.08_0.01_265/0.85)]',
        'border border-white/10',
        'transition-all duration-300 ease-out',
        'shadow-2xl player-bar-entrance',
        isHovered && 'shadow-player-hover border-primary/30',
        !isHovered && 'shadow-xl',
        className,
      )}
    >
      {children}
      {/* Ambient glow — KŌDŌ gradient on hover */}
      <div
        className={cn(
          'absolute inset-0 pointer-events-none -z-10',
          'bg-gradient-to-r from-[var(--chart-1)]/5 via-primary/5 to-[var(--chart-2)]/5',
          'opacity-0 transition-opacity duration-400 ease-out',
          isHovered && 'opacity-100',
        )}
      />
    </div>
  );
}
