// Ported verbatim from REFERENCIA/toknext_react_reference/src/components/icons.tsx
// — hand-drawn stroke icons matching the approved reference's exact paths.
// Kept separate from lucide-react (used elsewhere in the app) because no
// lucide icon reproduces these exact stroke paths pixel-for-pixel.
import type { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement>;
const Base = ({ children, ...props }: IconProps) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" {...props}>
    {children}
  </svg>
);

export const HomeIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="m3 11.5 9-7.5 9 7.5" />
    <path d="M5 10v10h14V10" />
    <path d="M9 20v-6h6v6" />
  </Base>
);
export const SearchIcon = (p: IconProps) => (
  <Base {...p}>
    <circle cx="11" cy="11" r="7" />
    <path d="m16 16 4 4" />
    <path d="M8 11h6M11 8v6" />
  </Base>
);
export const ProductIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="m5 7 7-4 7 4-7 4-7-4Z" />
    <path d="M5 7v10l7 4 7-4V7" />
  </Base>
);
export const TrendIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="m3 17 5-5 4 4 7-8" />
    <path d="M14 8h5v5" />
  </Base>
);
export const VideoIcon = (p: IconProps) => (
  <Base {...p}>
    <rect x="4" y="5" width="16" height="14" rx="3" />
    <path d="m10 9 5 3-5 3V9Z" />
  </Base>
);
export const CreatorsIcon = (p: IconProps) => (
  <Base {...p}>
    <circle cx="9" cy="8" r="3" />
    <path d="M3 20c0-4 3-7 6-7s6 3 6 7" />
    <circle cx="17" cy="10" r="2" />
    <path d="M15 15c3 0 5 2 6 5" />
  </Base>
);
export const StoreIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="M4 10h16l-1-5H5l-1 5Z" />
    <path d="M5 10v10h14V10" />
    <path d="M9 20v-5h6v5" />
  </Base>
);
export const TikTokAccountIcon = (p: IconProps) => (
  <Base {...p}>
    <circle cx="12" cy="8" r="3" />
    <path d="M5 20c.7-3.3 3.1-5 7-5s6.3 1.7 7 5" />
    <path d="M18 4v4M16 6h4" />
  </Base>
);
export const StarIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.4l6.1-.9L12 3Z" />
  </Base>
);
export const ReportIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="M6 3h9l3 3v15H6z" />
    <path d="M14 3v4h4" />
    <path d="M9 11h6M9 15h6" />
  </Base>
);
export const AiIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
    <path d="m6.6 6.6 2.1 2.1M15.3 15.3l2.1 2.1M17.4 6.6l-2.1 2.1M8.7 15.3l-2.1 2.1" />
    <circle cx="12" cy="12" r="4" />
  </Base>
);
export const IntegrationIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="M8 7h8M8 17h8" />
    <circle cx="5" cy="7" r="2" />
    <circle cx="19" cy="7" r="2" />
    <circle cx="5" cy="17" r="2" />
    <circle cx="19" cy="17" r="2" />
    <path d="M7 7h10M7 17h10M5 9v6M19 9v6" />
  </Base>
);
export const BillingIcon = (p: IconProps) => (
  <Base {...p}>
    <rect x="3" y="5" width="18" height="14" rx="2" />
    <path d="M3 10h18" />
  </Base>
);
export const PlusIcon = (p: IconProps) => (
  <Base {...p}>
    <circle cx="12" cy="12" r="9" />
    <path d="M8 12h8M12 8v8" />
  </Base>
);
export const SettingsIcon = (p: IconProps) => (
  <Base {...p}>
    <circle cx="12" cy="12" r="3" />
    <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21h-4v-.1A1.7 1.7 0 0 0 9 19.3a1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H3v-4h.1A1.7 1.7 0 0 0 4.7 9a1.7 1.7 0 0 0-.3-1.9l-.1-.1L7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3h4a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9A1.7 1.7 0 0 0 21 10h.1v4H21a1.7 1.7 0 0 0-1.6 1Z" />
  </Base>
);
export const CalendarIcon = (p: IconProps) => (
  <Base {...p}>
    <rect x="3" y="5" width="18" height="16" rx="2" />
    <path d="M16 3v4M8 3v4M3 10h18" />
  </Base>
);
export const BellIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" />
    <path d="M10 21h4" />
  </Base>
);
export const HeartIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8Z" />
  </Base>
);
export const BackIcon = (p: IconProps) => (
  <Base {...p}>
    <path d="m15 18-6-6 6-6" />
    <path d="M9 12h11" />
  </Base>
);