import React from 'react'
import { useDispatch } from 'react-redux'
import { lottery } from '../redux/user/userActions'
import { getLogedinUser } from '../redux/auth/authActions'

const Lottery = () => {
  const dispatch = useDispatch()

  const handleLottery = () => {
    dispatch(lottery())
    dispatch(getLogedinUser())
  }
  return (
    <div onClick={handleLottery}>
      <button className="cursor-pointer relative p-4 border-2 border-white overflow-hidden bg-gradient-to-tr from-yellow-100 to-yellow-200 group duration-300 hover:-rotate-45 hover:opacity-75 hover:scale-125 active:scale-100 rounded-full drop-shadow-xl">
        <svg className="animate-pulse group-hover:scale-100 group-hover:rotate-45 scale-90 duration-500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" width="70px" height="70px" viewBox="0 0 512 512" xmlSpace="preserve">
          <path className="fill-slate-600" d="M356.766,8.17c-20.892,0-39.481,9.814-51.446,25.071L256,96.085l-21.787,64.596l122.553-21.787  c36.098,0,65.362-29.264,65.362-65.362S392.864,8.17,356.766,8.17z M356.766,106.213h-67.171l41.434-52.796  c6.266-7.988,15.644-12.566,25.737-12.566c18.02,0,32.681,14.661,32.681,32.681S374.786,106.213,356.766,106.213z" />
          <path className="fill-slate-600" d="M206.68,33.241C194.715,17.984,176.126,8.17,155.234,8.17c-36.098,0-65.362,29.264-65.362,65.362  s29.264,65.362,65.362,65.362L256,160.681V96.085L206.68,33.241z M155.234,106.213c-18.02,0-32.681-14.661-32.681-32.681  s14.661-32.681,32.681-32.681c10.093,0,19.471,4.577,25.73,12.557l41.441,52.805H155.234z" />
          <polygon className="fill-red-400" points="57.191,226.043 57.191,258.723 404.033,258.723 422.128,503.83 454.809,503.83   454.809,226.043 256,171.574" />
          <polygon className="fill-red-300" points="57.191,258.723 57.191,503.83 223.319,503.83 256,471.149 288.681,503.83 422.128,503.83   422.128,258.723" />
          <polygon className="fill-red-400" points="433.021,138.894 411.234,171.574 433.021,226.043 465.702,226.043 465.702,138.894" />
          <rect x="46.298" y="138.894" className="fill-red-300" width="386.723" height="87.149" />
          <rect x="223.319" y="138.894" className="fill-slate-600" width="65.362" height="364.936" />
          <path className="fill-orange-200" d="M256,73.532c-18.05,0-32.681,14.631-32.681,32.681v32.681h65.362v-32.681  C288.681,88.163,274.05,73.532,256,73.532z" />
          <path className="fill-none" d="M465.702,130.723h-62.79c16.688-13.491,27.385-34.111,27.385-57.191C430.298,32.986,397.312,0,356.766,0  c-22.725,0-43.821,10.278-57.873,28.196l-30.642,39.045c-3.869-1.219-7.984-1.879-12.251-1.879c-4.267,0-8.382,0.66-12.251,1.879  l-30.64-39.043C199.054,10.278,177.959,0,155.234,0c-40.546,0-73.532,32.986-73.532,73.532c0,23.08,10.698,43.701,27.385,57.191  h-62.79c-4.512,0-8.17,3.658-8.17,8.17v87.149c0,4.512,3.658,8.17,8.17,8.17h168.851V495.66H65.362V258.723  c0-4.512-3.658-8.17-8.17-8.17s-8.17,3.658-8.17,8.17V503.83c0,4.512,3.658,8.17,8.17,8.17h397.617c4.513,0,8.17-3.658,8.17-8.17  V234.213h2.723c4.513,0,8.17-3.658,8.17-8.17v-87.149C473.872,134.381,470.215,130.723,465.702,130.723z M457.532,147.064v70.809  H296.851v-70.809H457.532z M311.749,38.282c10.936-13.945,27.344-21.942,45.017-21.942c31.535,0,57.191,25.656,57.191,57.191  s-25.657,57.191-57.191,57.191h-59.915v-16.34h59.915c22.526,0,40.851-18.325,40.851-40.851s-18.325-40.851-40.851-40.851  c-12.619,0-24.344,5.72-32.165,15.692l-31.683,40.37c-2.452-5.161-5.959-9.725-10.236-13.424L311.749,38.282z M306.393,98.043  l31.065-39.583c4.704-5.998,11.742-9.438,19.308-9.438c13.515,0,24.511,10.995,24.511,24.511s-10.996,24.511-24.511,24.511H306.393z   M98.043,73.532c0-31.536,25.656-57.191,57.191-57.191c17.673,0,34.081,7.997,45.019,21.944l29.064,37.035  c-4.277,3.698-7.783,8.263-10.236,13.424l-31.688-40.377c-7.818-9.969-19.54-15.686-32.159-15.686  c-22.526,0-40.851,18.325-40.851,40.851s18.325,40.851,40.851,40.851h67.193c0.15,0,0.297-0.014,0.446-0.023  c0.148,0.008,0.295,0.023,0.446,0.023c4.512,0,8.17-3.658,8.17-8.17c0-13.516,10.995-24.511,24.511-24.511  c13.515,0,24.511,10.995,24.511,24.511v24.511H155.233C123.698,130.723,98.043,105.068,98.043,73.532z M205.607,98.043h-50.373  c-13.516,0-24.511-10.995-24.511-24.511s10.995-24.511,24.511-24.511c7.567,0,14.602,3.437,19.302,9.431L205.607,98.043z   M54.468,217.872v-70.809h160.681v70.809H54.468z M231.489,147.064h49.021V495.66h-49.021V147.064z M446.638,495.66H296.851V234.213  h149.787V495.66z" />
        </svg>
        <span className="bg-gradient-to-r from-yellow-300 to-yellow-400 h-[100%] w-[50%] absolute group-hover:w-0 left-0 top-0 duration-300 overflow-hidden flex items-center justify-end font-bold">LOT</span>
        <span className="bg-gradient-to-r from-yellow-400 to-yellow-600 h-[100%] w-[50%] absolute group-hover:w-0 right-0 top-0 duration-500 overflow-hidden flex items-center justify-start font-bold">TERY</span>
      </button>
    </div>

  )
}

export default Lottery