import React from 'react';

/**
 * 파이프라인 타일 아이콘.
 *
 * ADO2 Design System 의 아이콘 규칙을 그대로 따른다(`assets/icons/*.svg`):
 *   viewBox 24×24 · fill none · stroke currentColor · stroke-width 2 · round cap/join
 *
 * 색은 넣지 않는다 — currentColor 로 두고 타일이 상태(민트/회색)를 정한다.
 * 파이프라인마다 다른 색을 주면 ADO2 팔레트(민트 액센트 + 퍼플 CTA 한 곳)가 깨진다.
 * 구분은 **형태**로만 한다.
 */

interface IconProps {
  size?: number;
}

const base = (size: number) => ({
  width: size,
  height: size,
  viewBox: '0 0 24 24',
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 2,
  strokeLinecap: 'round' as const,
  strokeLinejoin: 'round' as const,
});

/** ADO2 — 업체(가게)를 분석해 콘텐츠를 만든다 → 상점 차양 */
export const StorefrontIcon: React.FC<IconProps> = ({ size = 24 }) => (
  <svg {...base(size)} aria-hidden="true">
    <path d="M4 10v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9" />
    <path d="M3 10l1.4-4.3A1 1 0 0 1 5.35 5h13.3a1 1 0 0 1 .95.7L21 10a2.5 2.5 0 0 1-4.5 1.5A2.5 2.5 0 0 1 12 11.4a2.5 2.5 0 0 1-4.5.1A2.5 2.5 0 0 1 3 10z" />
    <path d="M10 20v-5h4v5" />
  </svg>
);

/** 썰박스 — 역사 이야기 → 펼친 책 */
export const BookIcon: React.FC<IconProps> = ({ size = 24 }) => (
  <svg {...base(size)} aria-hidden="true">
    <path d="M12 7.5v12" />
    <path d="M3 5h5a4 4 0 0 1 4 2.5V19.5A3 3 0 0 0 9.5 18H3V5z" />
    <path d="M21 5h-5a4 4 0 0 0-4 2.5V19.5A3 3 0 0 1 14.5 18H21V5z" />
  </svg>
);

/**
 * 무빙 포스터 — 포스터가 영상이 된다 → 세로 포스터 + 재생.
 *
 * 프레임은 2:3 세로다(12×18). 가로 프레임으로 그리면 일반 '동영상' 아이콘과
 * 구별되지 않는다 — 소재가 **포스터**라는 점이 이 기능의 정체성이라 비율로 드러낸다.
 */
export const PosterVideoIcon: React.FC<IconProps> = ({ size = 24 }) => (
  <svg {...base(size)} aria-hidden="true">
    <rect x="6" y="3" width="12" height="18" rx="2" />
    {/* 재생 삼각형만 채운다 — 아웃라인으로 그리면 이 크기에서 뭉개진다 */}
    <path d="M10.5 9v6l4.2-3z" fill="currentColor" />
  </svg>
);

/** 포스터 스타일 — 화풍 재해석 → 팔레트 */
export const PaletteIcon: React.FC<IconProps> = ({ size = 24 }) => (
  <svg {...base(size)} aria-hidden="true">
    <path d="M12 3a9 9 0 1 0 0 18 1.8 1.8 0 0 0 1.35-3 1.8 1.8 0 0 1 1.35-3H17a4 4 0 0 0 4-4c0-4.42-4.03-8-9-8z" />
    <circle cx="7.6" cy="12.4" r="1.1" fill="currentColor" stroke="none" />
    <circle cx="9.8" cy="8.2" r="1.1" fill="currentColor" stroke="none" />
    <circle cx="14.6" cy="7.6" r="1.1" fill="currentColor" stroke="none" />
  </svg>
);