import Button from '@/components/Button'
import Filters from '@/components/Filters'
import SwitchComponent from '@/components/Switch'
import Table from '@/components/Table'
import { AddSquare, Edit } from 'iconsax-react'
import { type FC } from 'react'

const FeaturesList: FC = () => {
    return (
        <div className='mt-5'>
            <div className='flex justify-between'>
                <h1 className='text-lg font-light'>
                    ویژگی ها
                </h1>

                <Button
                    className='w-fit px-6'
                >
                    <div className='flex gap-2 items-center'>
                        <AddSquare size={18} color='black' />
                        <div className='text-[13px]'>ویژگی جدید</div>
                    </div>
                </Button>
            </div>

            <div className='mt-8'>
                <Filters
                    fields={[
                        {
                            name: 'search',
                            type: 'input',
                            placeholder: 'جستجو'
                        }
                    ]}
                    onChange={() => { }}
                />
            </div>

            <div className='mt-8'>
                <Table
                    columns={[
                        {
                            key: 'id',
                            title: 'شماره',
                        },
                        {
                            key: 'title',
                            title: 'عنوان',
                        },
                        {
                            key: 'items',
                            title: 'آیتم ها',
                        },
                        {
                            key: 'status',
                            title: 'وضعیت',
                            render: () => {
                                return (
                                    <SwitchComponent
                                        active={true}
                                        onChange={() => { }}
                                    />
                                )
                            }
                        },
                        {
                            key: 'actions',
                            title: '',
                            render: () => {
                                return (
                                    <Edit size={20} color='#0037FF' />
                                )
                            }
                        },
                    ]}
                    data={[
                        {
                            id: 1,
                            title: 'رنگ',
                            items: 'آبی، سبز، قرمز',
                            status: 'فعال',
                        }
                    ]}
                />
            </div>
        </div>
    )
}

export default FeaturesList