import { TableHeaderArrowSVG, TableHeaderAscArrowSVG, TableHeaderDescArrowSVG } from "../../SVGs/CommonSVG"

const CustomTableHead = (props: any) => {
  const { tableHeadData, params, setParams } = props

  const handleSorting = (tData) => {
    setParams((prev) => ({ ...prev, sort_by: tData?.apiKey, sort: prev?.sort == "ASC" ? "DESC" : "ASC" }))
  }
  return (
    <thead className={tableHeadData?.theadClass ? tableHeadData?.theadClass : "bg-neutral-50 whitespace-nowrap sticky top-0 z-10 backdrop-blur-sm"}>
      <tr className='border-b border-neutral-100'>
        {tableHeadData?.head?.map((tData, i) => (
          <th
            scope="col"
            className={tData?.tdClass ?? "px-5 py-3.5 text-xs font-semibold text-neutral-600 uppercase tracking-wider"}
            key={i}
            onClick={() => tData?.sorting && handleSorting(tData)}
          >
            {
              tData?.sorting ?
                <span className='flex items-center cursor-pointer hover:text-primary transition-colors'>
                  {tData?.title}
                  {(params?.sort_by == tData?.apiKey && params?.sort == 'ASC') ?
                    <TableHeaderAscArrowSVG customClass='ml-2' /> :
                    (params?.sort_by == tData?.apiKey && params?.sort == 'DESC') ?
                      <TableHeaderDescArrowSVG customClass='ml-2' /> :
                      <TableHeaderArrowSVG customClass='ml-2' />}
                </span>
                : tData?.title
            }
          </th>
        ))}
      </tr>
    </thead>
  )
}

export default CustomTableHead