import { Eye } from 'iconsax-react'
import type { ColumnType } from '@/components/types/TableTypes'
import type { Food } from '../types/Types'
import { formatPrice, formatTime } from '../utils/formatters'
import Status from '@/components/Status'
import { Link } from 'react-router-dom'
import { Pages } from '@/config/Pages'

export const getFoodTableColumns = (): ColumnType<Food>[] => {
    return [
        {
            key: 'image',
            title: 'تصویر',
            render: (item: Food) => {
                const imageUrl = item.images && item.images.length > 0 ? item.images[0] : ''
                return (
                    <div className='w-10 h-10 rounded-full overflow-hidden bg-gray-200'>
                        {imageUrl ? (
                            <img src={imageUrl} alt={item.title} className='w-full h-full object-cover' />
                        ) : (
                            <div className='w-full h-full flex items-center justify-center text-gray-400 text-xs'>
                                بدون تصویر
                            </div>
                        )}
                    </div>
                )
            }
        },
        {
            key: 'title',
            title: 'نام غذا',
        },
        {
            key: 'categories',
            title: 'دسته بندی',
            render: (item: Food) => {
                return item.categories && item.categories.length > 0
                    ? item.categories.map(cat => cat.title).join(', ')
                    : '-'
            }
        },
        {
            key: 'price',
            title: 'قیمت',
            render: (item: Food) => {
                return formatPrice(item.price)
            }
        },
        {
            key: 'prepareTime',
            title: 'زمان آماده سازی',
            render: (item: Food) => {
                return formatTime(item.prepareTime)
            }
        },
        {
            key: 'isActive',
            title: 'وضعیت',
            render: (item: Food) => {
                return (
                    <Status variant={item.isActive ? 'success' : 'error'} label={item.isActive ? 'فعال' : 'غیرفعال'} />
                )
            }
        },
        {
            key: 'view',
            title: '',
            render: (item: Food) => {
                return (
                    <Link to={Pages.foods.update + item.id} className='flex gap-2 items-center'>
                        <Eye size={20} color='#8C90A3' />
                    </Link>
                )
            }
        },
    ]
}