'use client';

interface FlagProps {
  className?: string;
}

export function USFlag({ className = "w-8 h-6" }: FlagProps) {
  return (
    <div className={`${className} relative overflow-hidden rounded border border-gray-300 shadow-sm bg-white`}>
      {/* Simplified US Flag - red and white stripes with blue corner */}
      <div className="w-full h-full relative bg-red-600">
        {/* White stripes */}
        <div className="absolute w-full h-px bg-white top-1/6"></div>
        <div className="absolute w-full h-px bg-white top-2/6"></div>
        <div className="absolute w-full h-px bg-white top-3/6"></div>
        <div className="absolute w-full h-px bg-white top-4/6"></div>
        <div className="absolute w-full h-px bg-white top-5/6"></div>
        {/* Blue corner with star */}
        <div className="absolute top-0 left-0 w-2/5 h-2/5 bg-blue-700 flex items-center justify-center">
          <span className="text-white text-xs">⭐</span>
        </div>
      </div>
    </div>
  );
}

export function GermanFlag({ className = "w-8 h-6" }: FlagProps) {
  return (
    <div className={`${className} relative overflow-hidden rounded border border-gray-300 shadow-sm`}>
      {/* German Flag */}
      <div className="w-full h-full flex flex-col">
        <div className="h-1/3 bg-black"></div>
        <div className="h-1/3 bg-red-600"></div>
        <div className="h-1/3 bg-yellow-400"></div>
      </div>
    </div>
  );
}
