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

import { Icon } from '@iconify/react';
import Button from '../Button';
import { cn } from '@/lib/helper';

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

export const TableRowOptions = ({
  type = 'dropdown',
  recordId,
  basePath,
  onDelete,
}: TableRowOptionsProps) => (
  <div
    tabIndex={type === 'dropdown' ? 0 : undefined}
    className={cn(
      {
        'dropdown-content': type === 'dropdown',
        'mt-2': type === 'collapse',
      },
      'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
    )}
  >
    <Button
      href={`${basePath}/detail/?id=${recordId}`}
      variant='ghost'
      color='primary'
      className='justify-start text-sm'
    >
      <Icon icon='mdi:eye-outline' width={16} height={16} />
      Detail
    </Button>
    <Button
      href={`${basePath}/detail/edit/?id=${recordId}`}
      variant='ghost'
      color='warning'
      className='justify-start text-sm'
    >
      <Icon icon='material-symbols:edit-outline' width={16} height={16} />
      Edit
    </Button>
    {onDelete && (
      <Button
        onClick={onDelete}
        variant='ghost'
        color='error'
        className='text-error hover:text-inherit justify-start text-sm'
      >
        <Icon
          icon='material-symbols:delete-outline-rounded'
          width={16}
          height={16}
        />
        Delete
      </Button>
    )}
  </div>
);