import { type FC } from 'react'
import type { FormikProps } from 'formik'
import { Checkbox } from '@/components/ui/checkbox'
import type { CreateFoodType } from '../types/Types'

type MealTimesSectionProps = {
  formik: FormikProps<CreateFoodType>
}

const MealTimesSection: FC<MealTimesSectionProps> = ({ formik }) => {
  return (
    <div className='mt-6'>
      <div className='text-sm mb-3'>وعده‌های غذایی</div>
      <div className='flex gap-6 flex-wrap'>
        <div className='flex items-center gap-2'>
          <Checkbox
            checked={formik.values.breakfast}
            onCheckedChange={(checked) => formik.setFieldValue('breakfast', checked)}
          />
          <label className='text-xs cursor-pointer'>صبحانه</label>
        </div>
        <div className='flex items-center gap-2'>
          <Checkbox
            checked={formik.values.noon}
            onCheckedChange={(checked) => formik.setFieldValue('noon', checked)}
          />
          <label className='text-xs cursor-pointer'>ناهار</label>
        </div>
        <div className='flex items-center gap-2'>
          <Checkbox
            checked={formik.values.dinner}
            onCheckedChange={(checked) => formik.setFieldValue('dinner', checked)}
          />
          <label className='text-xs cursor-pointer'>شام</label>
        </div>
      </div>
    </div>
  )
}

export default MealTimesSection

