import Button from "@/components/ui/Button";

const categories = [
  { label: "Beauty & Health", accent: "#F8B84E", icon: "bottle" },
  { label: "Furniture", accent: "#7A5841", icon: "chair" },
  { label: "Electronics", accent: "#4356C5", icon: "device" },
  { label: "Mother & Kids", accent: "#F08FA7", icon: "kids" },
  { label: "Computer & Office", accent: "#0B66B3", icon: "laptop" },
  { label: "Foods & Drinks", accent: "#F1B92B", icon: "drink" },
  { label: "Phones & Accs", accent: "#2762A8", icon: "phone" },
];

function CategoryIcon({ accent, icon }: { accent: string; icon: string }) {
  return (
    <span
      className="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white shadow-sm"
      aria-hidden="true"
    >
      <span
        className="absolute inset-1 rounded-full opacity-15"
        style={{ backgroundColor: accent }}
      />
      {icon === "bottle" && (
        <svg className="relative h-5 w-5" viewBox="0 0 24 24" fill="none">
          <path d="M9 2h6v4l-1.5 2v13h-3V8L9 6V2Z" fill={accent} />
          <path d="M8 11h8v8a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-8Z" fill="#F6D78B" />
        </svg>
      )}
      {icon === "chair" && (
        <svg className="relative h-5 w-5" viewBox="0 0 24 24" fill="none">
          <path d="M6 4h9a3 3 0 0 1 3 3v7H7a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2Z" fill="#8B6A52" />
          <path d="M7 14v6M17 14v6M7 17h10" stroke={accent} strokeWidth="2" strokeLinecap="round" />
        </svg>
      )}
      {icon === "device" && (
        <svg className="relative h-5 w-5" viewBox="0 0 24 24" fill="none">
          <rect x="4" y="5" width="7" height="14" rx="1.5" fill={accent} />
          <rect x="13" y="4" width="7" height="16" rx="1.5" fill="#27318A" />
          <path d="M6.5 16h2M15.5 17h2" stroke="white" strokeWidth="1.4" strokeLinecap="round" />
        </svg>
      )}
      {icon === "kids" && (
        <svg className="relative h-5 w-5" viewBox="0 0 24 24" fill="none">
          <path d="M7 7a3 3 0 1 1 6 0v9H4V7h3Z" fill="#F8B2BF" />
          <path d="M14 9a3 3 0 1 1 6 0v7h-8V9h2Z" fill={accent} />
          <path d="M5 18h14" stroke="#E06B84" strokeWidth="2" strokeLinecap="round" />
        </svg>
      )}
      {icon === "laptop" && (
        <svg className="relative h-5 w-5" viewBox="0 0 24 24" fill="none">
          <rect x="5" y="5" width="14" height="10" rx="1.5" fill={accent} />
          <path d="M3 18h18l-2-3H5l-2 3Z" fill="#1F2937" />
          <path d="M8 8h8" stroke="#BDEBFF" strokeWidth="1.4" strokeLinecap="round" />
        </svg>
      )}
      {icon === "drink" && (
        <svg className="relative h-5 w-5" viewBox="0 0 24 24" fill="none">
          <path d="M7 3h10l-1 18H8L7 3Z" fill="#F8D463" />
          <path d="M8 8h8" stroke="#EF6F2E" strokeWidth="2" strokeLinecap="round" />
          <path d="M12 3 17 1" stroke={accent} strokeWidth="1.6" strokeLinecap="round" />
        </svg>
      )}
      {icon === "phone" && (
        <svg className="relative h-5 w-5" viewBox="0 0 24 24" fill="none">
          <rect x="7" y="2" width="10" height="20" rx="2" fill={accent} />
          <path d="M10 5h4M11 19h2" stroke="#D8EEFF" strokeWidth="1.4" strokeLinecap="round" />
        </svg>
      )}
    </span>
  );
}

export default function CategoryHeader() {
  return (
    <section className="w-full bg-[#f3f3f4] px-4 py-3 sm:px-6 lg:px-16">
      <div className="flex items-center gap-5 overflow-x-auto">
        <div className="flex min-w-max items-center gap-5">
          {categories.map((category) => (
            <Button
              key={category.label}
              variant="pill"
              className="h-11 border-0 bg-white px-4 text-xs font-medium text-gray-700 shadow-sm hover:bg-white sm:text-sm"
              icon={<CategoryIcon accent={category.accent} icon={category.icon} />}
            >
              {category.label}
            </Button>
          ))}
        </div>

        <Button
          variant="icon"
          aria-label="View more categories"
          className="ml-auto h-11 w-11 shrink-0 border-0 bg-white text-gray-800 shadow-sm hover:bg-white"
        >
          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
          </svg>
        </Button>
      </div>
    </section>
  );
}
