import type { CSSProperties } from 'react';

interface SmileyIconProps {
  faceColor?: string;
  featColor?: string;
  size?: number;
  spin?: boolean;
  className?: string;
  style?: CSSProperties;
}

export function SmileyIcon({
  faceColor = '#1E5EFF',
  featColor = '#0F0F10',
  size,
  spin = false,
  className = '',
  style,
}: SmileyIconProps) {
  const sizeStyle: CSSProperties = size ? { width: size, height: size } : {};
  return (
    <span
      className={`ds-smiley ${spin ? 'ds-smiley-spin' : ''} ${className}`}
      aria-hidden="true"
      style={{ ...sizeStyle, ...style }}
    >
      <svg viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="48" fill={faceColor} />
        <circle cx="35" cy="42" r="5.5" fill={featColor} />
        <circle cx="65" cy="42" r="5.5" fill={featColor} />
        <path
          d="M30 60 Q50 80 70 60"
          fill="none"
          stroke={featColor}
          strokeWidth="5.5"
          strokeLinecap="round"
        />
      </svg>
    </span>
  );
}