import { FormWrapper } from './FormWrapper'
import Image from 'next/image'

type LogoStyle = {
  style: string[]
}

type LogoStyleFormProps = LogoStyle & {
  updateFields: (fields: Partial<LogoStyle>) => void
}

const styles = ['modern', 'elegant', 'slab', 'handwritten', 'playful', 'futuristic']

export function LogoStyleForm({ style, updateFields }: LogoStyleFormProps) {
  const handleStyleChange = (selectedStyle: string) => {
    console.log(selectedStyle)
    const updatedStyles = style.includes(selectedStyle) ? style.filter((s) => s !== selectedStyle) : [...style, selectedStyle]

    updateFields({ style: updatedStyles })
  }

  return (
    <FormWrapper title="Please Select Styles" description="You can also skip and see logo results directly">
      <ul className="industryItems colorItems styleItems">
        {styles.map((styleOption, index) => (
          <li key={`${styleOption}${index}`} className="rounded">
            <label>
              <input type="checkbox" name="style" value={styleOption} checked={style.includes(styleOption)} onChange={() => handleStyleChange(styleOption)} />
              <div className="imgHolder">
                <div className="example">
                  <Image src={`/images/${styleOption}_example.svg`} alt="Description of the image" width={500} height={500} />
                </div>
                <div className="title">
                  <Image src={`/images/${styleOption}.svg`} alt="Description of the image" width={150} height={50} />
                </div>
              </div>
            </label>
          </li>
        ))}
      </ul>
    </FormWrapper>
  )
}