
import useStore from '@/lib/store';
import React, { useEffect } from 'react'

export default function StarDetails() {
  const choose = useStore(s => s.choose)
  const valueClass = "text-[#14ccfa] text-semibold text-[14px] capitalize leading-[16px] truncate"
  return (
    <React.Fragment>
      <div className={`absolute left-0 bottom-28 bg-black bg-opacity-[95%] p-2 overflow-hidden transition-transform ${choose?"translate-x-[20px]":"-translate-x-full"}`}
        style={{border:"1px solid #0c67a1"}}
      >
        <div className='relative flex flex-col gap-3 max-w-[300px] overflow-hidden text-[#0a5688] text-[10px] uppercase font-semibold' style={{fontFamily:'Electrolize'}}>
          <button className='absolute top-0 right-0 w-4 h-4 pointer-events-auto'
            onClick={()=>useStore.setState({choose:undefined})}
          >
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
              <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
              <g id="SVGRepo_iconCarrier">
                <path d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="#0c67a1"></path>
              </g>
            </svg>
          </button>
          <div>
            <div>Name</div>
            <div className={valueClass}>{choose?.star_name}</div>
          </div>
          <div>
            <div>Signature</div>
            <div className={valueClass}>{choose?.transaction_signature}</div>
          </div>
          <div>
            <div>From</div>
            <div className={valueClass}>{choose?.from_address}</div>
          </div>
          <div>
            <div>Amount</div>
            <div className={valueClass}>{choose?.amount}</div>
          </div>          
        </div>
      </div>
    </React.Fragment>
  )
}