// Small set of colorful duotone icons. Colors are intentionally vivid and
// theme-independent so section headers and cards get a pop of color against
// the dark Shamz palette.

type IconProps = { className?: string };

const box = (children: React.ReactNode, className?: string) => (
  <svg viewBox="0 0 24 24" fill="none" className={className ?? "w-7 h-7"} aria-hidden="true">
    {children}
  </svg>
);

export const MusicIcon = ({ className }: IconProps) =>
  box(
    <>
      <circle cx="7" cy="18" r="3" fill="#A855F7" />
      <circle cx="18" cy="16" r="3" fill="#EC4899" />
      <path d="M10 18V6l11-2v12" stroke="#C084FC" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </>,
    className
  );

export const FoodIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M4 11h16a8 8 0 0 1-16 0Z" fill="#F59E0B" />
      <path d="M4 11h16" stroke="#FBBF24" strokeWidth="2" strokeLinecap="round" />
      <path d="M9 7c0-1 1-1 1-2M13 7c0-1 1-1 1-2" stroke="#FCD34D" strokeWidth="2" strokeLinecap="round" />
      <rect x="6" y="19" width="12" height="2" rx="1" fill="#F97316" />
    </>,
    className
  );

export const MarketIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M6 8h12l-1 12H7L6 8Z" fill="#10B981" />
      <path d="M9 8a3 3 0 0 1 6 0" stroke="#34D399" strokeWidth="2" strokeLinecap="round" />
    </>,
    className
  );

export const TalesIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M4 5h7v14H4z" fill="#3B82F6" />
      <path d="M20 5h-7v14h7z" fill="#60A5FA" />
      <path d="M12 5v14" stroke="#1D4ED8" strokeWidth="1.5" />
    </>,
    className
  );

export const DanceIcon = ({ className }: IconProps) =>
  box(
    <>
      <circle cx="12" cy="5" r="2.5" fill="#EF4444" />
      <path d="M12 8c-2 2-5 2-6 4M12 8c2 1 3 4 2 6M12 8v5l-2 6M12 13l3 6" stroke="#F87171" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </>,
    className
  );

export const TicketIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2 2 2 0 0 0 0 4 2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 2 2 0 0 0 0-4Z" fill="#1f9d7a" />
      <path d="M14 6v12" stroke="#fff" strokeWidth="1.5" strokeDasharray="2 2" />
    </>,
    className
  );

export const CalendarIcon = ({ className }: IconProps) =>
  box(
    <>
      <rect x="4" y="6" width="16" height="14" rx="2" fill="#14B8A6" />
      <rect x="4" y="6" width="16" height="4" fill="#0D9488" />
      <path d="M8 4v3M16 4v3" stroke="#5EEAD4" strokeWidth="2" strokeLinecap="round" />
    </>,
    className
  );

export const LocationIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11Z" fill="#EF4444" />
      <circle cx="12" cy="10" r="2.5" fill="#fff" />
    </>,
    className
  );

export const CameraIcon = ({ className }: IconProps) =>
  box(
    <>
      <rect x="3" y="7" width="18" height="13" rx="2" fill="#8B5CF6" />
      <path d="M8 7l1.5-2h5L16 7" stroke="#A78BFA" strokeWidth="2" strokeLinejoin="round" />
      <circle cx="12" cy="13" r="3.5" fill="#fff" />
      <circle cx="12" cy="13" r="1.8" fill="#8B5CF6" />
    </>,
    className
  );

export const GamingIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M7 8h10a4 4 0 0 1 4 4v1a3 3 0 0 1-5.2 2L14 14h-4l-1.8 1A3 3 0 0 1 3 13v-1a4 4 0 0 1 4-4Z" fill="#6366F1" />
      <circle cx="16" cy="12" r="1.1" fill="#fff" />
      <circle cx="18" cy="14" r="1.1" fill="#fff" />
      <path d="M7 11v3M5.5 12.5h3" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" />
    </>,
    className
  );

export const FestivalIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M12 3v4M5 20l7-13 7 13H5Z" fill="#F472B6" />
      <path d="M12 7l-3.5 6.5h7L12 7Z" fill="#FBCFE8" />
      <circle cx="12" cy="3" r="1.5" fill="#FB7185" />
      <path d="M5 20h14" stroke="#EC4899" strokeWidth="2" strokeLinecap="round" />
    </>,
    className
  );

export const LearnIcon = ({ className }: IconProps) =>
  box(
    <>
      <rect x="3" y="5" width="18" height="12" rx="2" fill="#0EA5E9" />
      <rect x="6" y="8" width="12" height="6" rx="1" fill="#BAE6FD" />
      <path d="M9 20h6M12 17v3" stroke="#38BDF8" strokeWidth="2" strokeLinecap="round" />
    </>,
    className
  );

export const WellnessIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.5-7 9-7 9Z" fill="#34D399" />
      <path d="M8 12h2l1-2 1.5 4 1-2h2.5" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </>,
    className
  );

export const NightlifeIcon = ({ className }: IconProps) =>
  box(
    <>
      <path d="M5 5h12l-6 7v5" stroke="#FBBF24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M5 5h12l-6 7-6-7Z" fill="#F59E0B" />
      <path d="M8 19h6" stroke="#FBBF24" strokeWidth="2" strokeLinecap="round" />
      <circle cx="18" cy="6" r="2" fill="#FCD34D" />
    </>,
    className
  );

export const ArrowRightIcon = ({ className }: IconProps) =>
  box(
    <path
      d="M5 12h14M13 6l6 6-6 6"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />,
    className ?? "w-4 h-4"
  );

export const MpesaIcon = ({ className }: IconProps) =>
  box(
    <>
      <rect x="6" y="3" width="12" height="18" rx="2" fill="#22C55E" />
      <rect x="9" y="6" width="6" height="2" rx="1" fill="#fff" />
      <circle cx="12" cy="17" r="1.5" fill="#fff" />
    </>,
    className
  );