import { Icon } from '@iconify/react';
import Button from '../Button';
import DebouncedTextInput from '../input/DebouncedTextInput';

interface TableToolbarProps {
  addButton?: {
    href: string;
    label: string;
  };
  search: {
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    placeholder?: string;
  };
}

export const TableToolbar = ({ addButton, search }: TableToolbarProps) => {
  return (
    <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
      {addButton && (
        <div className='flex flex-row'>
          <Button href={addButton.href} color='primary'>
            <Icon icon='ic:round-plus' width={24} height={24} />
            {addButton.label}
          </Button>
        </div>
      )}
      <DebouncedTextInput
        name='search'
        placeholder={search.placeholder || 'Cari...'}
        value={search.value}
        onChange={search.onChange}
        className={{ wrapper: 'sm:max-w-3xs' }}
      />
    </div>
  );
};