bastienrobert/la-ferme

import React, { FC } from 'react'
import styled from 'styled-components'
import { Colors } from '@la-ferme/components'

export interface PlayButtonProps {
  onClick: () => void
}

const Point: FC<PlayButtonProps> = ({ onClick, ...style }) => {
  return (
    <Component onClick={onClick} {...style}>
      <svg fill="none" viewBox="0 0 142 142">
        <path
          d="M142 70.946c0 39.211-31.856 73.214-71 70.947-34.848-1.978-71-31.736-71-70.947C0 31.736 31.808 0 71 0c35.91 0 71 31.784 71 70.946z"
          fill={Colors.yellow}
        />
        <path
          d="M119.627 68.267a1 1 0 01-.028 1.774l-12.815 6.406a1 1 0 01-1.445-.826l-.953-13.853a1 1 0 011.474-.948l13.767 7.447zM26.061 76.458l-.412-5-.444-5.071c.015-.01.092-.02.23-.033l.45-.04c.17-.014.3-.033.387-.057l1.503-.193c.387-.05.686-.085.897-.103l1.934-.17 3.567-.397c.487-.043 1.024-.07 1.611-.08l.085-.007c.274-.04.448-.064.52-.07 1.622-.142 3.054.251 4.295 1.18.603.446 1.1 1.043 1.492 1.793.393.75.626 1.543.699 2.378.072.827.049 1.54-.07 2.138-.12.599-.295 1.112-.527 1.541-.927 1.731-2.915 2.87-5.963 3.414l-2.618.339c.09 1.953.181 3.468.276 4.546l.045.376.086.985c-.023.117-.077.199-.162.247l-6.934.717c-.172-.377-.296-.995-.37-1.854l-.577-6.58zm10.185-6.148c-.4-.823-1.298-1.202-2.698-1.136-.203.01-.483.03-.84.06-.097.01-.053 1.21.132 3.604l.055.914.1.727c.996-.104 1.853-.391 2.572-.862.727-.473 1.043-1.244.95-2.314-.04-.454-.13-.785-.271-.993zm23.709 6.577a3.017 3.017 0 00-.021.737l.024.28c.038.43.093.735.166.916.107 1.224.186 2.17.236 2.835-.03.215-4.022.67-11.975 1.366-.365.032-.97.077-1.814.134-.151-.232-.251-.627-.3-1.187l-.045-.792-.241-2.76-.19-2.312-.2-2.287-.31-3.685a71.69 71.69 0 00-.193-1.92l-.012-.133-.19-1.748c-.09-1.03-.063-1.706.08-2.029.163-.006.387-.022.67-.046l.584-.051L48.265 64c2.327-.203 3.62-.17 3.881.102l.274 4.253.275 3.566v.147l.395 5.063.51.237a70.394 70.394 0 014.245-.506c1.378-.12 2.082-.113 2.11.024zm22.004 2.915c.001.106-.217.178-.655.216l-1.118.098-.753.078-.742.065-1.179.116c-1.175.103-2.155.16-2.938.17-.025-.005-.058-.051-.098-.138l-.083-.25a8.597 8.597 0 00-.783-2.37l-5.2.504c-.021.141-.09.56-.21 1.256-.118.697-.207 1.223-.266 1.58-.073.088-.455.162-1.144.223l-.305.014-.706.062-3.155.35-.365.031-.34.042-.85.075a1.857 1.857 0 01-.202-.203c.565-2.876 1.36-6.45 2.383-10.722l.204-.888h-.012l.24-1.037c.077-.334.298-1.26.663-2.779.374-1.52.603-2.5.687-2.94.092-.44.15-.67.172-.688l2.019-.177 4.312-.439 1.172-.04.956-.146c.486-.042.738.034.755.228 1.008 2.191 2.376 5.352 4.101 9.481 1.726 4.13 2.697 6.45 2.913 6.963l.223.593c.076.214.178.438.304.672zm-12.62-5.587l.5-.031 2.905-.266c-.206-.955-.361-1.656-.466-2.104l-.644-2.04c-.674-2.105-1.021-3.177-1.04-3.217-.02-.039-.04-.074-.059-.105-.012-.04-.022-.063-.03-.07l-.044-.07c-.01-.032-.024-.051-.041-.058a.583.583 0 00-.042-.058c-.065-.092-.19-.167-.375-.224-.215.068-.654 2.565-1.317 7.492l-.064.814.717-.063zm27.676-14.332l.4-.047c.085.034.155.13.21.288l-.302.75-.001-.013-.658 1.59c-.999 2.31-1.64 3.848-1.924 4.616l-.344.827c-.371.898-.997 2.48-1.877 4.747.008.277.036.691.085 1.242l.439 5.023c-.03.133-.105.205-.226.215l-6.964.659a1.23 1.23 0 01-.336-.755l-.108-1.522-.031-.353-.02-.366-.065-.889c-.149-1.694-.741-3.472-1.778-5.334-.222-.389-.544-.937-.965-1.643l-2.129-3.466c-.056-.084-.208-.32-.454-.707a129.05 129.05 0 00-.808-1.253l.001.012c-.735-.932-1.117-1.56-1.145-1.885-.004-.04.124-.072.384-.094l3.125-.274c1.727-.151 3.029-.253 3.907-.305.263.026 1.11 1.916 2.542 5.672l.717 1.885c.634-2.277 1.279-4.94 1.935-7.987.003-.066.6-.15 1.792-.255l1.556-.136c.373-.032.686-.052.939-.057l2.103-.184z"
          fill={Colors.beige}
        />
      </svg>
    </Component>
  )
}

const Component = styled.button`
  appearance: none;
  width: 142px;
  margin: 0;
  padding: 0;
  background: none;
`

export default Point