"use client"
import React from "react";

interface PropsType extends React.SVGProps<SVGSVGElement> {
  value?: string;
  size?: number | string;
  color?: string;
  title?: string;
}

type IconType = {
  viewBox: string;
  path: React.JSX.Element;
}

const Icons = {
  book: {
    viewBox: "0 0 448 512",
    path: <path d="M96 0C43 0 0 43 0 96L0 416c0 53 43 96 96 96l288 0 32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64c17.7 0 32-14.3 32-32l0-320c0-17.7-14.3-32-32-32L384 0 96 0zm0 384l256 0 0 64L96 448c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16zm16 48l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
  },
  bookOpen: {
    viewBox: "0 0 576 512",
    path: <path d="M542.2 32.1c-54.8 3.1-163.7 14.4-231 55.6-4.6 2.8-7.3 7.9-7.3 13.2v363.9c0 11.6 12.6 18.9 23.3 13.5 69.2-34.8 169.2-44.3 218.7-46.9 16.9-.9 30-14.4 30-30.7V62.8c0-17.7-15.4-31.7-33.8-30.7zM264.7 87.6C197.5 46.5 88.6 35.2 33.8 32.1 15.4 31 0 45 0 62.8V400.6c0 16.2 13.1 29.8 30 30.7 49.5 2.6 149.6 12.1 218.8 47 10.6 5.4 23.2-1.9 23.2-13.5V100.6c0-5.3-2.6-10.1-7.3-13z"/>
  },
  bookmark: {
    viewBox: "0 0 384 512",
    path: <path d="M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z"/>
  },
  infoCircle: {
    viewBox: "0 0 512 512",
    path: <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 110a46 46 0 1 1 0 92 46 46 0 0 1 0-92zm56 294c0 6.6-5.4 12-12 12h-88 c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h12 V268h-12c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64c6.6 0 12 5.4 12 12v124h12c6.6 0 12 5.4 12 12v16z"/>
  },
  search: {
    viewBox: "0 0 512 512",
    path: <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6 .1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
  }
}

const IconButtonSearch: React.FC<PropsType> = ({
  size = 24,
  color = "currentColor",
  title,
  value,
  ...props
}) => {

  const getIcon = (): IconType => {
    switch (value) {
      case 'fas fa-book':
        return Icons.book;
      case 'fas fa-book-open':
        return Icons.bookOpen;
      case 'fas fa-bookmark':
        return Icons.bookmark;
      case 'fas fa-info-circle':
        return Icons.infoCircle;
      case 'fas fa-search':
        return Icons.search;
    
      default:
        return Icons.book;
    }
  }

  if (!value) {
    return null;
  }

  const icon = getIcon();


  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox={icon.viewBox}
      width={size}
      height={size}
      fill={color}
      aria-label={title}
      style={{ padding: '4px' }}
      role="img"
      {...props}
    >
      {title && <title>{title}</title>}
      { icon.path }
    </svg>
  );
};

export default IconButtonSearch;