import { type FC } from 'react'
import type { FormikProps } from 'formik'
import Input from '@/components/Input'
import Button from '@/components/Button'
import type { CreateFoodType } from '../types/Types'

type FoodContentSectionProps = {
  formik: FormikProps<CreateFoodType>
}

const FoodContentSection: FC<FoodContentSectionProps> = ({ formik }) => {

  return (
    <div className='mt-5'>
      <div className='text-sm mb-2'>محتوای غذا</div>
      <div className='space-y-2'>
        {formik.values.content.map((item, index) => (
          <div key={index} className='flex gap-2 items-center'>
            <Input
              placeholder='متن محتوا'
              value={item}
              onChange={(e) => {
                const newContent = [...formik.values.content]
                newContent[index] = e.target.value
                formik.setFieldValue('content', newContent)
              }}
            />
            <Button
              type='button'
              className='px-3 bg-red-500 hover:bg-red-600 w-auto'
              onClick={() => {
                const newContent = formik.values.content.filter((_, i) => i !== index)
                formik.setFieldValue('content', newContent)
              }}
            >
              حذف
            </Button>
          </div>
        ))}
        <Button
          type='button'
          className='w-full bg-gray-200 text-gray-700 hover:bg-gray-300'
          onClick={() => {
            formik.setFieldValue('content', [...formik.values.content, ''])
          }}
        >
          افزودن محتوا
        </Button>
      </div>
    </div>
  )
}

export default FoodContentSection