/**
 * Inline SVG icons for social media platforms.
 * Monoline stroke style matching CategoryIcons.tsx.
 */

const S = { width: "1.25em", height: "1.25em", verticalAlign: "-0.15em" } as const;
const P = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };

export function IconInstagram() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <rect {...P} x="2" y="2" width="20" height="20" rx="5" />
      <circle {...P} cx="12" cy="12" r="5" />
      <circle fill="currentColor" stroke="none" cx="17.5" cy="6.5" r="1.2" />
    </svg>
  );
}

export function IconYoutube() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <rect {...P} x="2" y="4" width="20" height="16" rx="4" />
      <polygon {...P} points="10,8.5 16,12 10,15.5" fill="currentColor" stroke="none" />
    </svg>
  );
}

export function IconBandcamp() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <polygon {...P} points="6,16 10,8 18,8 14,16" strokeWidth={1.8} />
    </svg>
  );
}

export function IconSoundcloud() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <path {...P} d="M2 16 v-3 M5 16 v-5 M8 16 v-7 M11 16 v-8 M14 16 v-6" strokeWidth={1.8} />
      <path {...P} d="M16 16 v-7 a4 4 0 0 1 4 0 v7" />
    </svg>
  );
}

export function IconTwitter() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <path {...P} d="M4 20 L10.5 12 M13.5 12 L20 4" strokeWidth={1.8} />
      <path {...P} d="M20 20 L13.5 12 M10.5 12 L4 4" strokeWidth={1.8} />
    </svg>
  );
}

export function IconSpotify() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <circle {...P} cx="12" cy="12" r="10" />
      <path {...P} d="M7 9.5 q5-2 10 0" />
      <path {...P} d="M8 12.5 q4-1.5 8 0" />
      <path {...P} d="M9 15.5 q3-1 6 0" />
    </svg>
  );
}

export function IconFacebook() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <rect {...P} x="2" y="2" width="20" height="20" rx="5" />
      <path {...P} d="M15 3 v4 h-2 a1 1 0 0 0-1 1 v3 h3 l-0.5 3 H12 v7" strokeWidth={1.8} />
    </svg>
  );
}

export function IconTwitch() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <path {...P} d="M4 3 L4 19 H8 V22 L11 19 H15 L20 14 V3 Z" />
      <line {...P} x1="10" y1="8" x2="10" y2="12" />
      <line {...P} x1="15" y1="8" x2="15" y2="12" />
    </svg>
  );
}

export function IconGlobe() {
  return (
    <svg viewBox="0 0 24 24" style={S}>
      <circle {...P} cx="12" cy="12" r="10" />
      <ellipse {...P} cx="12" cy="12" rx="4" ry="10" />
      <line {...P} x1="2" y1="12" x2="22" y2="12" />
    </svg>
  );
}

const ICON_MAP: Record<string, () => JSX.Element> = {
  instagram: IconInstagram,
  youtube: IconYoutube,
  bandcamp: IconBandcamp,
  soundcloud: IconSoundcloud,
  twitter: IconTwitter,
  x: IconTwitter,
  spotify: IconSpotify,
  facebook: IconFacebook,
  twitch: IconTwitch,
};

/** Resolves a platform name to the matching icon, falling back to globe. */
export function SocialIcon({ platform }: { platform: string }) {
  const Icon = ICON_MAP[platform.toLowerCase()] ?? IconGlobe;
  return <Icon />;
}