---
// CP-BASE-007 icon
interface Props {
  name: 'phone' | 'mail' | 'whatsapp' | 'location' | 'menu' | 'chevron';
  size?: number;
  decorative?: boolean;
  label?: string;
}
const { name, size = 24, decorative = true, label } = Astro.props;

const paths: Record<string, string[]> = {
  phone: [
    'M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z',
  ],
  mail: [
    'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z',
    'M22 6l-10 7L2 6',
  ],
  whatsapp: [
    'M17.6 6.32A8 8 0 0 0 12 4a8 8 0 0 0-6.9 12.1L4 20l4-1.1A8 8 0 0 0 12 20a8 8 0 0 0 5.6-13.68z',
  ],
  location: [
    'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z',
    'M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
  ],
  menu: ['M4 6h16', 'M4 12h16', 'M4 18h16'],
  chevron: ['M6 9l6 6 6-6'],
};
const pathList = paths[name] ?? [];
---
<svg
  xmlns="http://www.w3.org/2000/svg"
  width={size}
  height={size}
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden={decorative ? 'true' : undefined}
  aria-label={!decorative ? label : undefined}
  role={!decorative ? 'img' : undefined}
>
  {pathList.map((d) => <path d={d} />)}
</svg>