
import React, { useEffect, useState } from 'react'
import Styles from "./styles.module.scss"
import useStore from '@/lib/store'

export default function SearchResults({results, setResults}:{results:any[] | undefined, setResults(value:any):void}) {
  
  return (
    <React.Fragment>      
      <div className={results?`${Styles.searchResults}`:`${Styles.searchResults} ${Styles.hidden}`}>
        <div className='grid grid-cols-3'>
          <div className={Styles.th}>Name</div>
          <div className={Styles.th}>Signature</div>
          <div className={Styles.th}>Wallet</div>
        </div>
        <div className='max-h-[338px] overflow-y-auto'
          style={{
            scrollbarWidth: "none"
          }}
        >
          {
            results?.map((item, index )=><Item key={index} data={item}/>)
          }
        </div>
      </div>
    </React.Fragment>
  )
}

const Item = ({data}:any) =>{
  return (
    <div className='grid grid-cols-3 cursor-pointer' onClick={()=>useStore.setState({choose:data})}>
      <div className={Styles.td}><strong>{data.star_name}</strong></div>
      <div className={`${Styles.td} capitalize`}>{data.transaction_signature}</div>
      <div className={`${Styles.td} capitalize`}>{data.from_address}</div>
    </div>
  )
}