import React from 'react'
import Styles from "./styles.module.scss"
import Link from 'next/link'
import { formatDateTime, getConstellation } from '@/lib/utils'

export default function RecentTXNs({tabs, data, setTabs}:{tabs:number, data:any[] | undefined, setTabs(value:any):void}) {
  
  return (
    <React.Fragment>
      <div className={tabs===2?`${Styles.recentTXNs}`:`${Styles.recentTXNs} ${Styles.hidden}`}>
        <div className={Styles.head}>
          Stellar Births
          <svg className='absolute top-2.5 right-2.5 cursor-pointer' onClick={()=>setTabs(0)}
            width={28} height={28} 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="M7 17L16.8995 7.10051" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path> 
              <path d="M7 7.00001L16.8995 16.8995" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path>
            </g>
          </svg>
        </div>
        <div className='w-full bg-[#010913F3] border-l border-t border-[#0c67a1]'>
          <div className='grid grid-cols-5 bg-[#010913F3]'>
            <div className={Styles.th}>Name</div>
            <div className={`${Styles.td} col-span-2`}>Constellation Name</div>
            <div className={`${Styles.td} col-span-2`}>Creation Time</div>
          </div>
          <div className='max-h-[338px] overflow-y-auto'
            style={{
              scrollbarWidth: "none"
            }}
          >
            {
              data?.map((item, index )=><Item key={index} data={item}/>)
            }
          </div>
        </div>
        <div className={Styles.footer}/>
      </div>
    </React.Fragment>
  )
}

const Item = ({data}:any) =>{

  return (
    <Link  target='_blank' href={`https://solscan.io/tx/${data.transaction_signature}`}>
      <div className='grid grid-cols-5 cursor-pointer'>
        <div className={Styles.td}><strong>{data.star_name}</strong></div>
        <div className={`${Styles.td} capitalize col-span-2`}>{getConstellation(data.transaction_id)}</div>
        <div className={`${Styles.td} capitalize col-span-2`}>{formatDateTime(data.time)}</div>
      </div>
    </Link>
  )
}