import { Edit } from 'iconsax-react'
import SwitchComponent from '@/components/Switch'
import TrashWithConfrim from '@/components/TrashWithConfrim'
import type { Category } from '../types/Types'

type Props = {
  onStatusChange: (id: string, value: boolean) => void
  onEdit: (category: Category) => void
  onDelete: (id: string) => void
  isDeleting?: boolean
}

const CategoryTableColumns = ({ onStatusChange, onEdit, onDelete, isDeleting = false }: Props) => {
  return [
    {
      title: 'آیکون',
      key: 'avatarUrl',
      render: (item: Category) => (
        <div className="w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden">
          {item.avatarUrl ? (
            <img
              src={item.avatarUrl}
              alt={item.title}
              className="w-full h-full object-cover"
            />
          ) : (
            <div className="w-full h-full bg-gray-200 flex items-center justify-center text-xs">
              بدون آیکون
            </div>
          )}
        </div>
      )
    },
    {
      title: 'عنوان',
      key: 'title'
    },
    {
      title: 'وضعیت',
      key: 'isActive',
      render: (item: Category) => (
        <SwitchComponent
          active={item.isActive}
          onChange={(value) => onStatusChange(item.id, value)}
        />
      )
    },
    {
      key: 'actions',
      title: '',
      render: (item: Category) => {
        return (
          <div className='flex gap-2 items-center'>
            <Edit
              onClick={() => onEdit(item)}
              size={20}
              color='#8C90A3'
              className='cursor-pointer'
            />
            <TrashWithConfrim
              onDelete={() => onDelete(item.id)}
              isLoading={isDeleting}
            />
          </div>
        )
      }
    }
  ]
}

export default CategoryTableColumns

