/**
 * Material Symbols Outlined 아이콘 추상화 컴포넌트 (Phase B)
 * 직접 <span class="material-symbols-outlined"> 사용을 피하고 일관된 API 제공
 * Stitch 샘플의 FILL/wght/GRAD/opsz 변형 지원
 */
import styled from 'styled-components';

interface MatIconProps {
  /** 아이콘 이름 (Material Symbols 이름) */
  name: string;
  /** 채워진 스타일 여부 (FILL: 0 또는 1) */
  filled?: boolean;
  /** 굵기 (100~700, 기본 400) */
  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
  /** 크기 (px, 기본 24) */
  size?: number;
  /** 추가 클래스명 */
  className?: string;
  /** aria-label (접근성) */
  'aria-label'?: string;
  /** 색상 (CSS 변수명 또는 직접 값) */
  color?: string;
}

const StyledIcon = styled.span<{
  $filled: boolean;
  $weight: number;
  $size: number;
  $color?: string;
}>`
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: ${(p) => p.$size}px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings:
    'FILL' ${(p) => (p.$filled ? 1 : 0)},
    'wght' ${(p) => p.$weight},
    'GRAD' 0,
    'opsz' ${(p) => p.$size};
  color: ${(p) => p.$color ?? 'inherit'};
  flex-shrink: 0;
`;

export default function MatIcon({
  name,
  filled = false,
  weight = 400,
  size = 24,
  className,
  'aria-label': ariaLabel,
  color,
}: MatIconProps) {
  return (
    <StyledIcon
      className={className}
      $filled={filled}
      $weight={weight}
      $size={size}
      $color={color}
      aria-hidden={!ariaLabel}
      aria-label={ariaLabel}
    >
      {name}
    </StyledIcon>
  );
}