import React from 'react';

const base = (size, stroke, strokeWidth = 1.5) => ({
  width: size, height: size, fill: 'none', stroke,
  strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
});

export function IconHome({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-3v-6h-8v6H5a2 2 0 0 1-2-2z" />
    </svg>
  );
}

export function IconSun({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2" />
    </svg>
  );
}

export function IconHeart({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 7a5.5 5.5 0 0 1 9.5 5c-2.5 4.5-9.5 9-9.5 9z" />
    </svg>
  );
}

export function IconYinYang({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <circle cx="12" cy="12" r="9" />
      <path d="M12 3a4.5 4.5 0 0 0 0 9 4.5 4.5 0 0 1 0 9" />
      <circle cx="12" cy="7.5" r="1" fill={stroke} />
      <circle cx="12" cy="16.5" r="1" fill={stroke} />
    </svg>
  );
}

export function IconUser({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c1-4 5-6 8-6s7 2 8 6" />
    </svg>
  );
}

export function IconStar({ size = 16, filled = true, color = '#D4AF37' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill={filled ? color : 'none'} stroke={color} strokeWidth="1.4"
      strokeLinejoin="round">
      <path d="M12 3l2.7 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.3 6.5 20.2l1.1-6.2L3 9.6l6.3-.9z" />
    </svg>
  );
}

export function IconMoney({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <path d="M9 5c-2 0-3 1.5-3 3l6 2c2 .7 3 1.5 3 3 0 1.8-1.5 3-4 3" />
      <path d="M12 4v2M12 18v2" />
    </svg>
  );
}

export function IconCalendar({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <rect x="4" y="6" width="16" height="14" rx="2" />
      <path d="M4 10h16M9 4v4M15 4v4" />
    </svg>
  );
}

export function IconClock({ size = 20, stroke = 'currentColor', strokeWidth }) {
  return (
    <svg viewBox="0 0 24 24" {...base(size, stroke, strokeWidth)}>
      <circle cx="12" cy="12" r="8.5" />
      <path d="M12 7.5V12l3 2" />
    </svg>
  );
}

export function IconPaw({ size = 12, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
      <ellipse cx="6" cy="10" rx="2" ry="2.5" />
      <ellipse cx="10" cy="6" rx="2" ry="2.5" />
      <ellipse cx="14" cy="6" rx="2" ry="2.5" />
      <ellipse cx="18" cy="10" rx="2" ry="2.5" />
      <path d="M8 14c0-2 2-3 4-3s4 1 4 3-2 5-4 5-4-3-4-5z" />
    </svg>
  );
}

export function IconChevron({ size = 14, color = 'currentColor', dir = 'right' }) {
  const rotate = { right: 0, down: 90, left: 180, up: 270 }[dir] || 0;
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}
      fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      style={{ transform: `rotate(${rotate}deg)` }}>
      <path d="M9 6l6 6-6 6" />
    </svg>
  );
}

export function IconSparkle({ size = 12, color = 'currentColor' }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={color}>
      <path d="M12 2l2 7 7 2-7 2-2 7-2-7-7-2 7-2z" />
    </svg>
  );
}