import { IconPinOffOutline } from "../../../assets/svg";
import { TableHeaderProps } from "../../types/table";
import { TableHeadButton } from "./table-head.styles";

function TableHeadPin<T>({ header }: TableHeaderProps<T>) {
  // ! Header now is pinned via dropdown on table head
  // if (header.column.getIsPinned() !== "left") {
  //   return (
  //     <TableHeadButton onClick={() => header.column.pin("left")}>
  //       {/* <IconPinOutline /> */}
  //     </TableHeadButton>
  //   );
  // }

  return (
    header.column.getIsPinned() && (
      <TableHeadButton
        onClick={(e) => {
          e.stopPropagation();
          header.column.pin(false);
        }}
      >
        <IconPinOffOutline />
      </TableHeadButton>
    )
  );
}

export default TableHeadPin;