import React from "react";

interface IconProps {
  name: string;
  size?: number;
  style?: React.CSSProperties;
}

export const Icon: React.FC<IconProps> = ({ name, size = 20, style }) => {
  const p = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.7,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    style,
  };

  switch (name) {
    case "books":
      return (
        <svg {...p}>
          <path d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v15H5a1 1 0 0 1-1-1z" />
          <path d="M10 20V8a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v12" />
          <path d="m15 20 1.2-12.4a1 1 0 0 1 1.1-.9l2.9.3a1 1 0 0 1 .9 1.1L20 20" />
        </svg>
      );
    case "author":
      return (
        <svg {...p}>
          <circle cx="12" cy="8" r="3.5" />
          <path d="M5 20a7 7 0 0 1 14 0" />
        </svg>
      );
    case "calendar":
      return (
        <svg {...p}>
          <rect x="3.5" y="4.5" width="17" height="16" rx="2" />
          <path d="M3.5 9h17M8 3v3M16 3v3" />
        </svg>
      );
    case "calendar-plus":
      return (
        <svg {...p}>
          <rect x="3.5" y="4.5" width="17" height="16" rx="2" />
          <path d="M3.5 9h17M8 3v3M16 3v3M12 12.5v5M9.5 15h5" />
        </svg>
      );
    case "calendar-check":
      return (
        <svg {...p}>
          <rect x="3.5" y="4.5" width="17" height="16" rx="2" />
          <path d="M3.5 9h17M8 3v3M16 3v3M9 14.5l2 2 4-4" />
        </svg>
      );
    case "chart":
      return (
        <svg {...p}>
          <path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />
        </svg>
      );
    case "book":
      return (
        <svg {...p}>
          <path d="M5 4h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2z" />
          <path d="M18 4v16" />
        </svg>
      );
    case "tablet":
      return (
        <svg {...p}>
          <rect x="6" y="3" width="12" height="18" rx="2" />
          <path d="M11 18h2" />
        </svg>
      );
    case "headphones":
      return (
        <svg {...p}>
          <path d="M4 14v-2a8 8 0 0 1 16 0v2" />
          <rect x="3" y="13" width="4" height="6" rx="1.5" />
          <rect x="17" y="13" width="4" height="6" rx="1.5" />
        </svg>
      );
    case "star":
      return (
        <svg {...p}>
          <path d="M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 17l-5.3 2.6 1-5.8L3.5 9.7l5.9-.9z" />
        </svg>
      );
    case "plus":
      return (
        <svg {...p}>
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case "search":
      return (
        <svg {...p}>
          <circle cx="11" cy="11" r="7" />
          <path d="m20 20-3.5-3.5" />
        </svg>
      );
    case "close":
      return (
        <svg {...p}>
          <path d="M6 6l12 12M18 6 6 18" />
        </svg>
      );
    case "check":
      return (
        <svg {...p}>
          <path d="M5 12.5l4.5 4.5L19 7" />
        </svg>
      );
    case "edit":
      return (
        <svg {...p}>
          <path d="M4 20h4l10.5-10.5a2 2 0 0 0-2.8-2.8L5 17z" />
          <path d="M14 7l3 3" />
        </svg>
      );
    case "heart":
      return (
        <svg {...p}>
          <path d="M12 20s-7-4.5-9.3-9C1 7.5 3 4.5 6.2 4.5c2 0 3.2 1.3 3.8 2.3.6-1 1.8-2.3 3.8-2.3C17 4.5 19 7.5 17.3 11 15 15.5 12 20 12 20z" />
        </svg>
      );
    case "grid":
      return (
        <svg {...p}>
          <rect x="4" y="4" width="6.5" height="6.5" rx="1.2" />
          <rect x="13.5" y="4" width="6.5" height="6.5" rx="1.2" />
          <rect x="4" y="13.5" width="6.5" height="6.5" rx="1.2" />
          <rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.2" />
        </svg>
      );
    case "list":
      return (
        <svg {...p}>
          <path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" />
        </svg>
      );
    case "pages":
      return (
        <svg {...p}>
          <path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H12v16H5.5A1.5 1.5 0 0 1 4 18.5z" />
          <path d="M12 4h6.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H12" />
        </svg>
      );
    case "clock":
      return (
        <svg {...p}>
          <circle cx="12" cy="12" r="8.5" />
          <path d="M12 7.5V12l3 2" />
        </svg>
      );
    case "chevron":
    case "chevron-right":
      return (
        <svg {...p}>
          <path d="m9 6 6 6-6 6" />
        </svg>
      );
    case "chevron-left":
      return (
        <svg {...p}>
          <path d="m15 6-6 6 6 6" />
        </svg>
      );
    case "arrow-right":
      return (
        <svg {...p}>
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      );
    case "info":
      return (
        <svg {...p}>
          <circle cx="12" cy="12" r="8.5" />
          <path d="M12 11v5M12 8h.01" />
        </svg>
      );
    case "trophy":
      return (
        <svg {...p}>
          <path d="M7 4h10v5a5 5 0 0 1-10 0z" />
          <path d="M7 6H4v1a3 3 0 0 0 3 3M17 6h3v1a3 3 0 0 1-3 3M9 19h6M10 15.5V19M14 15.5V19" />
        </svg>
      );
    case "cart":
      return (
        <svg {...p}>
          <circle cx="9" cy="20" r="1.4" />
          <circle cx="17" cy="20" r="1.4" />
          <path d="M3 4h2l1.6 11a1 1 0 0 0 1 .9h8.6a1 1 0 0 0 1-.8L20 7H6" />
        </svg>
      );
    case "trash":
      return (
        <svg {...p}>
          <path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M10 11v6M14 11v6" />
        </svg>
      );
    case "link":
    case "external":
      return (
        <svg {...p}>
          <path d="M14 4h6v6M20 4l-8 8M10 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4" />
        </svg>
      );
    case "tag":
      return (
        <svg {...p}>
          <path d="M3 12V4a1 1 0 0 1 1-1h8l8 8-9 9z" />
          <circle cx="7.5" cy="7.5" r="1.2" />
        </svg>
      );
    case "wallet":
      return (
        <svg {...p}>
          <path d="M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
          <path d="M3 9h13a2 2 0 0 1 0 4H3M16.5 11h.01" />
        </svg>
      );
    default:
      return null;
  }
};
export default Icon;