
import useStore from '@/lib/store';
import Link from 'next/link';
import React, { useEffect } from 'react'
import Styles from "./StarDetails.module.scss"
import { formatDateTime, getConstellation } from '@/lib/utils';

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 overflow-hidden transition-transform ${choose?"translate-x-[20px]":"-translate-x-full"}`}>
        <div className='relative'>
          <button className='absolute z-10 top-2 right-2 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 className={Styles.head}></div>
          <div className='relative min-w-[200px] border-x border-[#0c67a1] bg-[#010913F3] px-3 flex flex-col gap-3 max-w-[300px] overflow-hidden text-[#0a5688] text-[10px] uppercase font-semibold' style={{fontFamily:'Electrolize'}}>
            <div>
              <div>Name</div>
              <div className={valueClass}>
                <Link className='pointer-events-auto cursor-pointer underline' target='_blank' href={`https://solscan.io/tx/${choose?.transaction_signature}`}>
                  {choose?.star_name}
                </Link>
              </div>
            </div>
            <div>
              <div>Constellation Name</div>
              <div className={valueClass}>
                {choose && getConstellation(choose.transaction_id)}
              </div>
            </div>
            <div>
              <div>Creation Time</div>
              <div className={valueClass}>
                {choose && formatDateTime(choose.time)}
              </div>
            </div>         
          </div>
          <div className={Styles.footer}></div>
        </div>
      </div>
    </React.Fragment>
  )
}