import React from 'react';
import { useTheme } from '../context/ThemeContext';

function Logo({ size = 'md', className = '' }) {
  const { isDark } = useTheme();
  
  const sizes = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-16 h-16',
    xl: 'w-24 h-24',
  };

  return (
    <svg 
      xmlns="http://www.w3.org/2000/svg" 
      viewBox="0 0 100 100"
      className={`${sizes[size]} ${className}`}
      aria-label="Jackbox Game Picker Logo"
    >
      <defs>
        <linearGradient id="logo-grad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style={{ stopColor: '#6366f1', stopOpacity: 1 }} />
          <stop offset="100%" style={{ stopColor: '#4f46e5', stopOpacity: 1 }} />
        </linearGradient>
      </defs>
      
      {/* Dice/Box shape */}
      <rect x="10" y="10" width="80" height="80" rx="12" fill="url(#logo-grad)"/>
      
      {/* Dots representing game selection */}
      <circle cx="30" cy="30" r="6" fill="white" opacity="0.9"/>
      <circle cx="50" cy="30" r="6" fill="white" opacity="0.9"/>
      <circle cx="70" cy="30" r="6" fill="white" opacity="0.9"/>
      
      <circle cx="30" cy="50" r="6" fill="white" opacity="0.9"/>
      <circle cx="50" cy="50" r="6" fill="white" opacity="1"/>
      <circle cx="70" cy="50" r="6" fill="white" opacity="0.9"/>
      
      <circle cx="30" cy="70" r="6" fill="white" opacity="0.9"/>
      <circle cx="50" cy="70" r="6" fill="white" opacity="0.9"/>
      <circle cx="70" cy="70" r="6" fill="white" opacity="0.9"/>
    </svg>
  );
}

export default Logo;

