/** Small stroke icons used across the table (decorative: aria-hidden). */
const Svg = ({ size = 14, width = 2.2, fill = "none", children }) => (
  <svg
    aria-hidden="true"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill={fill}
    stroke="currentColor"
    stroke-width={width}
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    {children}
  </svg>
);

export const PinIcon = ({ size }) => (
  <Svg size={size}>
    <path d="M12 17v5" />
    <path d="M9 10.76V6h6v4.76l2 3.24H7z" />
    <path d="M8 3h8" />
  </Svg>
);

export const CloseIcon = ({ size }) => (
  <Svg size={size} width={2.4}>
    <path d="M6 6l12 12" />
    <path d="M18 6 6 18" />
  </Svg>
);

export const PlusIcon = ({ size = 20 }) => (
  <Svg size={size} width={2}>
    <path d="M12 5v14" />
    <path d="M5 12h14" />
  </Svg>
);

export const CheckIcon = () => (
  <Svg size={12} width={3}>
    <path d="M20 6 9 17l-5-5" />
  </Svg>
);

export const DashIcon = () => (
  <Svg size={12} width={3}>
    <path d="M6 12h12" />
  </Svg>
);

export const StarIcon = () => (
  <Svg size={14} width={1.5} fill="currentColor">
    <path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z" />
  </Svg>
);