---
import { cn } from "@/lib/utils";

interface Props {
  name: "search" | "chevronDown" | "clock";
  class?: string;
}

const { name, class: className } = Astro.props;

const icons = {
  search: [
    '<circle cx="11" cy="11" r="8"/>',
    '<path d="m21 21-4.34-4.34"/>',
  ],
  chevronDown: ['<path d="m6 9 6 6 6-6"/>'],
  clock: [
    '<circle cx="12" cy="12" r="10"/>',
    '<path d="M12 6v6l4 2"/>',
  ],
} as const;
---

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class={cn("size-4 shrink-0", className)}
  aria-hidden="true"
  set:html={icons[name].join("")}
/>