import React from 'react';

type CoinSizes = 'tiny' | 'small' | 'medium' | 'large' | 'big';

interface CoinProps {
  size: CoinSizes;
}

const Coin: React.FC<CoinProps> = ({ size }) => (
  <div className={`coin ${size}`}>
    <svg width="100%" height="100%" viewBox="0 0 72.96 66.31">
      <g>
        <path
          d="M39.8,0H33.16a33.16,33.16,0,0,1,0,66.31H39.8A33.16,33.16,0,1,0,39.8,0Z"
          fill="#cd7e3d"
        />
        <path
          d="M66.31,33.16A33.16,33.16,0,1,0,33.16,66.31,33.15,33.15,0,0,0,66.31,33.16ZM33.16,59.67h0a26.51,26.51,0,0,1,0-53h0a26.51,26.51,0,0,1,0,53Z"
          fill="#ffa700"
        />
        <path
          d="M6.65,33.16A26.51,26.51,0,0,1,33.16,6.65h0a26.51,26.51,0,0,0,0,53h0A26.51,26.51,0,0,1,6.65,33.16Z"
          fill="#ffc300"
        />
        <path
          d="M59.67,33.16A26.51,26.51,0,0,0,33.16,6.65c.29,0,.58,0,.87,0a26.48,26.48,0,0,0,0,52.93c-.29,0-.58.05-.87.05A26.51,26.51,0,0,0,59.67,33.16ZM46.5,52.37,33.81,43.15,21.13,52.37H18.58L23.92,36,10,25.82H27.21L32.54,9.41h2.55l5.33,16.41H57.67L43.71,36l5.34,16.41Z"
          fill="#ffc300"
        />
        <polygon
          points="18.58 52.37 21.13 52.37 33.81 43.15 32.54 42.23 18.58 52.37"
          fill="#cd7e3d"
        />
        <polygon
          points="40.42 25.82 35.09 9.41 32.54 9.41 37.88 25.82 40.42 25.82"
          fill="#cd7e3d"
        />
        <polygon
          points="57.67 25.82 55.13 25.82 41.17 35.96 46.5 52.37 49.05 52.37 43.71 35.96 57.67 25.82"
          fill="#cd7e3d"
        />
        <path
          d="M8.4,33.16A26.49,26.49,0,0,1,34,6.69c-.29,0-.58,0-.87,0h0a26.51,26.51,0,0,0,0,53h0c.29,0,.58,0,.87-.05A26.48,26.48,0,0,1,8.4,33.16Z"
          fill="#cd7e3d"
        />
        <polygon
          points="55.13 25.82 40.42 25.82 37.88 25.82 32.54 9.41 27.21 25.82 12.5 25.82 9.96 25.82 23.92 35.96 18.58 52.37 32.54 42.23 33.81 43.15 46.5 52.37 41.17 35.96 55.13 25.82"
          fill="#ffdd68"
        />
      </g>
    </svg>
  </div>
);

export default Coin;