lti-web-client/src/components/table/TableRowOptions.tsx

import { Icon } from '@iconify/react';
import Button from '@/components/Button';
import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';

interface TableRowOptionsProps {
  type?: 'dropdown' | 'collapse';
  recordId: string | number;
  basePath: string;
  onDelete?: () => void;
  queryParam?: string;
  showEdit?: boolean;
  showDelete?: boolean;
}

export const TableRowOptions = ({
  type = 'dropdown',
  recordId,
  basePath,
  onDelete,
  queryParam = 'id',
  showEdit = true,
  showDelete = true,
}: TableRowOptionsProps) => (
  <RowOptionsMenuWrapper type={type}>
    <Button
      href={`${basePath}/detail/?${queryParam}=${recordId}`}
      variant='ghost'
      color='primary'
      className='justify-start text-sm'
    >
      <Icon icon='mdi:eye-outline' width={16} height={16} />
      Detail
    </Button>
    {showEdit && (
      <Button
        href={`${basePath}/detail/edit/?${queryParam}=${recordId}`}
        variant='ghost'
        color='warning'
        className='justify-start text-sm'
      >
        <Icon icon='mdi:pencil-outline' width={16} height={16} />
        Edit
      </Button>
    )}
    {showDelete && onDelete && (
      <Button
        onClick={onDelete}
        variant='ghost'
        color='error'
        className='justify-start text-sm text-error focus-visible:text-error-content hover:text-error-content'
      >
        <Icon
          icon='mdi:delete-outline'
          width={16}
          height={16}
          className='justify-start text-sm'
        />
        Delete
      </Button>
    )}
  </RowOptionsMenuWrapper>
);