veza/apps/web/src/features/player/components/player-bar/PlayerBarGlass.tsx

/**
 * PlayerBarGlass — Glassmorphism container (KŌDŌ v3)
 * backdrop-blur + semantic tokens + gradient overlay (Spotify/Discord standard)
 */

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-xl overflow-hidden',
        'backdrop-blur-[16px]',
        'bg-[var(--sumi-glass-bg)]',
        'border border-[var(--sumi-glass-border)]',
        'transition-all duration-[var(--sumi-duration-normal)] ease-[var(--sumi-ease-out)]',
        'shadow-[var(--sumi-shadow-xl)] player-bar-entrance',
        isHovered && 'shadow-[var(--sumi-shadow-xl)] border-[var(--sumi-border-accent)]',
        !isHovered && 'shadow-[var(--sumi-shadow-lg)]',
        className,
      )}
    >
      {children}
      {/* Subtle accent tint on hover — SUMI */}
      <div
        className={cn(
          'absolute inset-0 pointer-events-none -z-10',
          'bg-[var(--sumi-accent-subtle)]',
          'opacity-0 transition-opacity duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
          isHovered && 'opacity-100',
        )}
      />
    </div>
  );
}