import { Button } from "@/ui";
import { Row, RowData, Table } from "@tanstack/react-table";
import { t } from "i18next";
import { ChevronDownIcon, ChevronUpIcon, CopyIcon, Trash2Icon } from "lucide-react";

export const QuoteItemsInlineRowActions = <TData extends RowData>({
  row,
  table,
  onDelete,
}: {
  row: Row<TData>;
  table: Table<TData>;
  onDelete: () => void;
}) => (
  <div className='flex flex-wrap items-center gap-2'>
    <Button type='button' variant='outline' size='sm' onClick={() => table.options.meta?.insertItem(row.index)}>
      <ChevronUpIcon className='w-4 h-4 mr-2' />
      {t("common.insert_row_above")}
    </Button>
    <Button
      type='button'
      variant='outline'
      size='sm'
      onClick={() => table.options.meta?.insertItem(row.index + 1)}
    >
      <ChevronDownIcon className='w-4 h-4 mr-2' />
      {t("common.insert_row_below")}
    </Button>
    <Button type='button' variant='outline' size='sm' onClick={() => table.options.meta?.duplicateItems(row.index)}>
      <CopyIcon className='w-4 h-4 mr-2' />
      {t("common.duplicate_row")}
    </Button>
    <Button
      type='button'
      variant='destructive'
      size='sm'
      onClick={() => {
        table.options.meta?.deleteItems(row.index);
        onDelete();
      }}
    >
      <Trash2Icon className='w-4 h-4 mr-2' />
      {t("common.remove_row")}
    </Button>
  </div>
);