import React from 'react';

interface LogoProps {
  className?: string;
  hideText?: boolean;
}

export default function Logo({ className = "h-12", hideText = false }: LogoProps) {
  return (
    <div className={`flex items-center gap-3 ${className}`}>
      {/* Precision drawn Islamic Arch traditional window in Teal and Gold */}
      <svg
        id="daralfikr-logo-svg"
        viewBox="0 0 100 120"
        className="h-full w-auto filter drop-shadow-sm"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* Outer Islamic Arch Frame (Teal) */}
        <path
          d="M50 12 L85 45 V108 H15 V45 Z"
          stroke="#8C8C64"
          strokeWidth="6"
          strokeLinejoin="round"
          fill="white"
        />
        
        {/* Inner Islamic Arch Border (Teal) */}
        <path
          d="M50 20 L77 47 V100 H23 V47 Z"
          stroke="#8C8C64"
          strokeWidth="2.5"
          strokeLinejoin="round"
        />

        {/* Traditional Geometric Pattern (Gold) inside top arch */}
        {/* Star lattice mesh representation */}
        <g stroke="#C5A85C" strokeWidth="1.5" strokeLinecap="round" opacity="0.9">
          {/* Horizontal division */}
          <line x1="23" y1="55" x2="77" y2="55" stroke="#8C8C64" strokeWidth="3" />
          
          {/* Diamond lattices */}
          <path d="M50 25 L65 40 L50 55 L35 40 Z" />
          <path d="M50 32.5 L57.5 40 L50 47.5 L42.5 40 Z" />
          
          <line x1="35" y1="40" x2="65" y2="40" />
          <line x1="50" y1="20" x2="50" y2="55" />
          
          <path d="M26 40 L35 30 M74 40 L65 30" />
          <path d="M26 48 L35 55 M74 48 L65 55" />
          
          {/* Circular/Octagonal central elements */}
          <polygon points="50,36 54,40 50,44 46,40" fill="#C5A85C" />
        </g>

        {/* Lower central traditional motif (Teal & Gold hexagons) */}
        <g>
          {/* Inner hexagon (Teal) */}
          <polygon
            points="50,65 62,72 62,86 50,93 38,86 38,72"
            fill="none"
            stroke="#8C8C64"
            strokeWidth="3.5"
          />
          {/* Gold dot center */}
          <circle cx="50" cy="79" r="4.5" fill="#C5A85C" />
          {/* Accent small hexagon on top */}
          <polygon
            points="50,58 55,61 55,67 50,70 45,67 45,61"
            fill="#C5A85C"
          />
        </g>
      </svg>

      {!hideText && (
        <div className="flex flex-col justify-center leading-none text-left">
          <span 
            className="font-sans text-sm md:text-[15px] font-bold tracking-wide text-teal-850" 
            style={{ fontFamily: "'Space Grotesk', sans-serif" }}
          >
            أكاديمية دار الفكر الدولية
          </span>
          <span 
            className="text-[9px] md:text-[10px] font-extrabold tracking-widest text-amber-600 mt-1 uppercase"
            style={{ fontFamily: "'JetBrains Mono', monospace" }}
          >
            DAR AL-FIKR INT. ACADEMY
          </span>
        </div>
      )}
    </div>
  );
}
