import cx from 'classnames'
import { PropsWithClassName } from '@/lib/types'

export type Props = PropsWithClassName & {
  name: 'facebook' | 'twitter' | 'instagram' | 'linkedin' | 'pinterest' | 'quote' | 'arrow-down' | 'x'
}

export default function Icon({ name, className }: Props) {
  const classes = cx(`fill-current`, className)

  switch (name) {
    case 'facebook':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.22 19.089" className={classes}>
          <title>Facebook</title>
          <path
            d="M9.541,10.6H6.814v8.492h-3.7V10.613H0V7.129H3.085c0-.824-.025-1.6.008-2.365a8.565,8.565,0,0,1,.2-1.769A3.772,3.772,0,0,1,7.48.012Q8.64.087,9.8.111c.3.006.424.081.416.4-.02.815-.007,1.631-.007,2.5a13.521,13.521,0,0,0-1.429.011,4.269,4.269,0,0,0-1.241.3,1.225,1.225,0,0,0-.73,1.15c-.018.849,0,1.7,0,2.635h3.278L9.541,10.6"
            transform="translate(0 0)"
          />
        </svg>
      )
    case 'twitter':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.616 16.046" className={classes}>
          <title>Twitter</title>
          <path
            d="M255.254,35.217c2.074-.1,4-.26,5.518-1.578a19.559,19.559,0,0,1-2.12-1.043,3.952,3.952,0,0,1-1.389-1.88l1.589-.075.031-.144a4.17,4.17,0,0,1-2.956-3.85l1.706.46.116-.138c-1.79-1.471-2.347-3.214-1.267-5.4,2.273,2.426,4.843,4.177,8.336,4.217,0-.227.005-.412,0-.6a3.865,3.865,0,0,1,2.226-3.849,4,4,0,0,1,4.568.491.814.814,0,0,0,.976.15c.584-.273,1.178-.523,1.849-.818A5.554,5.554,0,0,1,273,23.31c.287-.06.577-.108.86-.182.3-.079.6-.183,1.01-.312a4,4,0,0,1-1.548,1.714.594.594,0,0,0-.33.629,11.344,11.344,0,0,1-11.752,11.73,12.6,12.6,0,0,1-5.545-1.395c-.114-.058-.218-.136-.441-.278"
            transform="translate(-255.254 -20.845)"
          />
        </svg>
      )
    case 'instagram':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.373 19.373" className={classes}>
          <title>Instagram</title>
          <defs>
            <clipPath id="clip-path">
              <rect id="Rectangle_3366" data-name="Rectangle 3366" width="19.373" height="19.373" />
            </clipPath>
          </defs>
          <g transform="translate(0 0)">
            <g transform="translate(0 0)" clipPath="url(#clip-path)">
              <path
                d="M9.686,1.746c2.587,0,2.893.01,3.914.057a5.349,5.349,0,0,1,1.8.333,3,3,0,0,1,1.114.725,3,3,0,0,1,.725,1.114,5.363,5.363,0,0,1,.334,1.8c.046,1.021.057,1.328.057,3.914s-.01,2.893-.057,3.914a5.369,5.369,0,0,1-.334,1.8A3.207,3.207,0,0,1,15.4,17.238a5.363,5.363,0,0,1-1.8.334c-1.021.046-1.328.057-3.914.057s-2.893-.01-3.914-.057a5.363,5.363,0,0,1-1.8-.334,3.01,3.01,0,0,1-1.114-.724A3,3,0,0,1,2.135,15.4,5.369,5.369,0,0,1,1.8,13.6c-.046-1.021-.056-1.328-.056-3.914s.01-2.893.056-3.914a5.363,5.363,0,0,1,.334-1.8A3,3,0,0,1,2.86,2.86a3,3,0,0,1,1.114-.725,5.349,5.349,0,0,1,1.8-.333c1.021-.047,1.328-.057,3.914-.057M9.686,0C7.056,0,6.726.011,5.693.058A7.093,7.093,0,0,0,3.341.509,4.743,4.743,0,0,0,1.626,1.626,4.75,4.75,0,0,0,.509,3.341,7.1,7.1,0,0,0,.058,5.693C.011,6.726,0,7.056,0,9.686s.011,2.961.058,3.994a7.093,7.093,0,0,0,.451,2.351,4.743,4.743,0,0,0,1.117,1.716,4.746,4.746,0,0,0,1.716,1.118,7.115,7.115,0,0,0,2.351.45c1.033.048,1.363.058,3.994.058s2.961-.01,3.994-.058a7.115,7.115,0,0,0,2.351-.45,4.956,4.956,0,0,0,2.833-2.833,7.115,7.115,0,0,0,.45-2.351c.047-1.033.058-1.363.058-3.994s-.011-2.961-.058-3.994a7.119,7.119,0,0,0-.45-2.351,4.762,4.762,0,0,0-1.118-1.716A4.743,4.743,0,0,0,16.032.509,7.093,7.093,0,0,0,13.68.058C12.647.011,12.317,0,9.686,0"
                transform="translate(0 0)"
              />
              <path
                d="M11.3,6.325A4.974,4.974,0,1,0,16.274,11.3,4.975,4.975,0,0,0,11.3,6.325m0,8.2A3.229,3.229,0,1,1,14.528,11.3,3.228,3.228,0,0,1,11.3,14.528"
                transform="translate(-1.613 -1.613)"
              />
              <path
                d="M20.707,5.664A1.163,1.163,0,1,1,19.545,4.5a1.163,1.163,0,0,1,1.162,1.162"
                transform="translate(-4.687 -1.148)"
              />
            </g>
          </g>
        </svg>
      )
    case 'linkedin':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.604 18.695" className={classes}>
          <title>LinkedIn</title>
          <g transform="translate(0 0)">
            <path
              d="M584.5,53.032V54.6c.228-.239.361-.371.487-.512,1.628-1.82,6.5-1.952,7.8,1.24a4.712,4.712,0,0,1,.376,1.667c.04,2.681.02,5.363.02,8.045a3.35,3.35,0,0,1-.048.374c-1.125,0-2.236,0-3.346,0-.386,0-.282-.3-.283-.514-.006-1.89,0-3.78,0-5.67,0-.2,0-.4-.008-.594a2.381,2.381,0,0,0-2.4-2.408,2.555,2.555,0,0,0-2.588,2.507c-.028,1.962-.005,3.924-.011,5.885,0,.888.113.792-.817.8s-1.863,0-2.829,0V53.032Z"
              transform="translate(-574.578 -46.721)"
            />
            <rect width="3.62" height="12.343" transform="translate(0.424 6.32)" />
            <path
              d="M545.193,16.109a2.239,2.239,0,0,1-2.259,2.259,2.244,2.244,0,1,1,2.259-2.259"
              transform="translate(-540.748 -13.879)"
            />
          </g>
        </svg>
      )
    case 'pinterest':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.42 18.628" className={classes}>
          <title>Pinterest</title>
          <defs>
            <clipPath id="clip-path">
              <rect width="14.42" height="18.628" />
            </clipPath>
          </defs>
          <g transform="translate(0 0)">
            <g transform="translate(0 0)" clipPath="url(#clip-path)">
              <path
                d="M2.191,10.771a.368.368,0,0,0,.536-.267c.049-.187.166-.661.218-.859a.517.517,0,0,0-.154-.6,3.087,3.087,0,0,1-.706-2.1A5.067,5.067,0,0,1,7.353,1.825c2.873,0,4.452,1.755,4.452,4.1,0,3.085-1.366,5.689-3.392,5.689A1.656,1.656,0,0,1,6.724,9.554a22.835,22.835,0,0,0,.945-3.8A1.433,1.433,0,0,0,6.226,4.151c-1.145,0-2.064,1.183-2.064,2.769A4.116,4.116,0,0,0,4.5,8.613s-1.171,4.962-1.376,5.83A11.993,11.993,0,0,0,3.1,18.509a.142.142,0,0,0,.254.062,11.419,11.419,0,0,0,1.931-3.5c.132-.476.753-2.941.753-2.941a3.067,3.067,0,0,0,2.613,1.333c3.44,0,5.773-3.136,5.773-7.333C14.42,2.956,11.732,0,7.647,0,2.564,0,0,3.644,0,6.683c0,1.841.7,3.478,2.191,4.087"
                transform="translate(0 0)"
              />
            </g>
          </g>
        </svg>
      )
    case 'quote':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.684 75" className={classes}>
          <path
            d="M44.6,91.319H27.411V88.827c0-9.468,5.233-14.452,17.193-15.448V54.94C20.185,55.189,3.74,68.4,3.74,90.82v39.12H44.6Zm53.821,0H81.232V88.827c0-9.468,5.233-14.452,17.193-15.448V54.94C74.006,55.189,57.561,68.4,57.561,90.82v39.12H98.424Z"
            transform="translate(-3.74 -54.94)"
          />
        </svg>
      )
    case 'arrow-down':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 27.5" className={classes}>
          <g transform="translate(-1313 -840)">
            <path d="M0,0V29L14.5,14.5Z" transform="translate(1342 853) rotate(90)" />
            <rect width="14" height="1" transform="translate(1328 840) rotate(90)" />
          </g>
        </svg>
      )
    case 'x':
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.728 12.728" className={classes}>
          <g transform="translate(-1333.414 -1024)">
            <rect width="3" height="15" transform="translate(1333.414 1026.121) rotate(-45)" />
            <rect width="3" height="15" transform="translate(1344.021 1024) rotate(45)" />
          </g>
        </svg>
      )
    default:
      return null
  }
}
