import type { SVGProps } from 'react';

export type SajuIconName =
  | 'trait' | 'element' | 'branch' | 'sinsal' | 'wealth' | 'career'
  | 'love' | 'health' | 'daeun' | 'seun' | 'golden' | 'summary';

// SECTION_META 순서(기질·오행·지지·신살·재물·직업·애정·건강·대운·세운·황금기·종합)와 1:1
export const SECTION_ICON_ORDER: SajuIconName[] = [
  'trait', 'element', 'branch', 'sinsal', 'wealth', 'career',
  'love', 'health', 'daeun', 'seun', 'golden', 'summary',
];

const PATHS: Record<SajuIconName, string> = {
  trait:   'M12 3l2.2 5.6L20 9l-4.5 3.9L17 19l-5-3-5 3 1.5-6.1L4 9l5.8-.4z',       // 별/기질
  element: 'M12 3v18M3 12h18',                                                       // 균형/오행
  branch:  'M7 7h10v10M7 7v10h10',                                                   // 연결/지지
  sinsal:  'M12 2l2 7h7l-5.5 4 2 7L12 17l-5.5 3 2-7L3 9h7z',                         // 신살(sparkle)
  wealth:  'M12 4a8 4 0 1 0 0 8a8 4 0 1 0 0-8M4 8v8a8 4 0 0 0 16 0V8',               // 재물(coin stack)
  career:  'M4 8h16v11H4zM9 8V5h6v3',                                                // 직업(가방)
  love:    'M12 20s-7-4.4-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.6-7 9-7 9z',       // 애정(하트)
  health:  'M3 12h4l2-5 3 10 2-6 2 1h5',                                             // 건강(맥박)
  daeun:   'M4 20L20 4M14 4h6v6',                                                    // 대운(길/화살)
  seun:    'M4 7h16v13H4zM4 11h16M8 3v4M16 3v4',                                     // 세운(달력)
  golden:  'M6 9a6 6 0 1 0 12 0a6 6 0 1 0-12 0M9 15l-1 6 4-2 4 2-1-6',               // 황금기(메달)
  summary: 'M6 3h9l3 3v15H6zM9 9h6M9 13h6M9 17h4',                                   // 종합(문서)
};

export function SajuIcon({ name, className }: { name: SajuIconName; className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6}
      strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden>
      <path d={PATHS[name]} />
    </svg>
  );
}

export function LottoIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6}
      strokeLinecap="round" strokeLinejoin="round" aria-hidden {...props}>
      <circle cx="12" cy="12" r="8" />
      <path d="M12 8v8M8 12h8" />
    </svg>
  );
}