import { cn } from '@/lib/utils';

export type ServiceIconKind =
  | 'strategy'
  | 'automation'
  | 'llm-rag'
  | 'architecture'
  | 'mobile'
  | 'google-stack';

type Props = {
  kind: ServiceIconKind;
  className?: string;
};

/**
 * Custom line icons — one per service. Stroke uses currentColor so the
 * parent's text color drives the accent.
 */
export function ServiceIcon({ kind, className }: Props) {
  const base = cn('shrink-0', className);
  switch (kind) {
    case 'strategy':
      return (
        <svg viewBox="0 0 32 32" className={base} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <circle cx="16" cy="16" r="3" />
          <circle cx="16" cy="16" r="9" />
          <circle cx="16" cy="16" r="13.5" strokeOpacity="0.4" />
          <path d="M16 3 V7" />
          <path d="M16 25 V29" />
          <path d="M3 16 H7" />
          <path d="M25 16 H29" />
          <path d="M16 16 L23.5 8.5" strokeWidth="2" />
        </svg>
      );
    case 'automation':
      return (
        <svg viewBox="0 0 32 32" className={base} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <rect x="5" y="6" width="9" height="6" rx="1.5" />
          <rect x="18" y="6" width="9" height="6" rx="1.5" />
          <rect x="5" y="20" width="9" height="6" rx="1.5" />
          <rect x="18" y="20" width="9" height="6" rx="1.5" />
          <path d="M14 9 H18" />
          <path d="M9.5 12 V20" />
          <path d="M22.5 12 V20" />
          <path d="M14 23 H18" />
        </svg>
      );
    case 'llm-rag':
      return (
        <svg viewBox="0 0 32 32" className={base} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <path d="M16 4 C9 4 5 9 5 14 c0 3 1.4 5.4 3.5 7 V25 l3-2 a13 13 0 0 0 4.5 1 c7 0 11-5 11-10 S23 4 16 4 Z" />
          <circle cx="11.5" cy="14" r="1.2" fill="currentColor" />
          <circle cx="16" cy="14" r="1.2" fill="currentColor" />
          <circle cx="20.5" cy="14" r="1.2" fill="currentColor" />
        </svg>
      );
    case 'architecture':
      return (
        <svg viewBox="0 0 32 32" className={base} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <path d="M16 4 L27 9.5 L16 15 L5 9.5 Z" />
          <path d="M5 16 L16 21.5 L27 16" />
          <path d="M5 22.5 L16 28 L27 22.5" strokeOpacity="0.6" />
        </svg>
      );
    case 'mobile':
      return (
        <svg viewBox="0 0 32 32" className={base} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <rect x="9" y="3" width="14" height="26" rx="3" />
          <path d="M14 7 H18" />
          <circle cx="16" cy="24.5" r="1" fill="currentColor" />
          <path d="M12 13 L20 13" />
          <path d="M12 17 L17 17" />
          <path d="M12 21 L19 21" strokeOpacity="0.6" />
        </svg>
      );
    case 'google-stack':
      return (
        <svg viewBox="0 0 32 32" className={base} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
          <path d="M16 4 L28 11 V21 L16 28 L4 21 V11 Z" />
          <path d="M16 4 V28" strokeOpacity="0.5" />
          <path d="M4 11 L28 11" strokeOpacity="0.5" />
          <path d="M4 21 L28 21" strokeOpacity="0.5" />
          <circle cx="16" cy="16" r="2.5" fill="currentColor" />
        </svg>
      );
  }
}
