// src/components/icons/runinga-logo.tsx
import type { SVGProps } from 'react';

export function RuningaLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 80" // Aspect ratio for a TV like shape
      fill="none"
      stroke="currentColor" // Inherits color from parent, e.g., text-primary-foreground
      strokeWidth="3" // Slightly thicker lines for visibility
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-labelledby="runingaLogoTitle"
      role="img"
      {...props}
    >
      <title id="runingaLogoTitle">Runinga Television Logo</title>
      
      {/* TV Body */}
      <rect x="5" y="10" width="90" height="65" rx="10" ry="10" />
      
      {/* Screen Bezel - slightly inset from body, provides a border for the screen */}
      <rect x="12" y="17" width="76" height="42" rx="5" ry="5" fill="currentColor" strokeWidth="1"/>

      {/* Screen - filled with accent color */}
      <rect x="15" y="20" width="70" height="36" rx="3" ry="3" fill="hsl(var(--accent))" stroke="none" />
      
      {/* Text "RUNINGA" */}
      <text 
        x="50" y="33" // Adjusted y for better centering
        fontFamily="Arial, Helvetica, sans-serif" 
        fontSize="9" // Slightly smaller to fit well
        fill="hsl(var(--accent-foreground))" // Ensure contrast with accent background
        textAnchor="middle" 
        fontWeight="bold"
        letterSpacing="0.5"
      >
        RUNINGA
      </text>
      {/* Text "TV" */}
      <text 
        x="50" y="47" // Adjusted y for better centering
        fontFamily="Arial, Helvetica, sans-serif" 
        fontSize="9" // Slightly smaller
        fill="hsl(var(--accent-foreground))"
        textAnchor="middle" 
        fontWeight="bold"
      >
        TV
      </text>
      
      {/* Antenna */}
      <line x1="35" y1="10" x2="25" y2="2" />
      <line x1="65" y1="10" x2="75" y2="2" />
      <circle cx="25" cy="2" r="1.5" fill="currentColor" />
      <circle cx="75" cy="2" r="1.5" fill="currentColor" />

      {/* Control Knobs (Simplified) */}
      <circle cx="85" cy="65" r="4" strokeWidth="2" />
      <circle cx="70" cy="65" r="3" strokeWidth="1.5" />

      {/* Feet */}
      <line x1="25" y1="75" x2="35" y2="80" />
      <line x1="75" y1="75" x2="65" y2="80" />
    </svg>
  );
}