import { ChangeEvent, FC } from 'react'
import Input from '../../../components/Input'
import CheckBoxComponent from '../../../components/CheckBoxComponent'

interface Props {
    id: string
    label: string
    value: string | boolean
    checked: boolean
    featureType: 'boolean' | 'text'
    onChange: (id: string, value: string | boolean, checked: boolean) => void
}

const PlanItem: FC<Props> = ({ id, label, value, checked, featureType, onChange }) => {
    const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
        const newChecked = e.target.checked
        onChange(id, value, newChecked)
    }

    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
        onChange(id, e.target.value, checked)
    }

    return (
        <div key={id} className='mt-4 text-sm flex gap-4 items-center'>
            <div className='flex-1 whitespace-nowrap'>
                {label}
            </div>

            {featureType === 'text' && (
                <div className='flex-1'>
                    <Input
                        placeholder='مقدار'
                        value={value as string}
                        onChange={handleInputChange}
                    />
                </div>
            )}

            {featureType === 'boolean' && (
                <CheckBoxComponent
                    checked={checked}
                    onChange={handleCheckboxChange}
                />
            )}
        </div>
    )
}

export default PlanItem