import {FormWrapper} from "./FormWrapper";
import Image from "next/image";
import React from "react";

type LogoColor = {
    primary_color: string,
    secondary_color: string,
    background_color: string
};

type LogoColorFormProps = LogoColor & {
    updateFields: (fields: Partial<LogoColor>) => void;
};

const colorCategories = [
    {name: "Warm", img: "color1"},
    {name: "Cold", img: "color2"},
    {name: "Contrast", img: "color3"},
    {name: "Pastel", img: "color4"},
    {name: "Greyscale", img: "color5"},
    {name: "Gradient", img: "color6"},
];

export function LogoColorSchemeForm({primary_color, secondary_color, background_color, updateFields}: LogoColorFormProps) {
    return (
        <FormWrapper
            title="Please Select A Color Category"
            description="Select color schemes that matches your brand">
            <div className="colorBox">
                <h3>Primary Color</h3>
                <div className="flex items-center gap-4">
                    <div className="flex-auto">
                        <div className="industryItemSelect">
                            <div className="inputCont">
                                <label htmlFor="">Enter Color Name</label>
                                <input className="" type="text" autoFocus required onChange={(e) => updateFields({ primary_color: e.target.value })} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="colorBox">
                <h3>Secondary Color</h3>
                <div className="flex items-center gap-4">
                    <div className="flex-auto">
                        <div className="industryItemSelect">
                            <div className="inputCont">
                                <label htmlFor="">Enter Color Name</label>
                                <input className="" type="text" autoFocus required onChange={(e) => updateFields({ secondary_color: e.target.value })} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="colorBox">
                <h3>Background Color</h3>
                <div className="flex items-center gap-4">
                    <div className="flex-auto">
                        <div className="industryItemSelect">
                            <div className="inputCont">
                                <label htmlFor="">Enter Color Name</label>
                                <input className="" type="text" autoFocus required onChange={(e) => updateFields({ background_color: e.target.value })} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* <ul className="colorItems industryItems">
        {colorCategories.map((colorCategory, index) => (
          <li key={`${colorCategory}${index}`} className="rounded bg-white ">
            <label className="grid place-items-center py-10">
              <div className="imgContainer">
                <Image src={`/images/${colorCategory.img}.png`} alt="Description of the image" width={300} height={300} />
              </div>
              <input type="radio" name="colorCategory" value={colorCategory.name} checked={color === colorCategory.name} onChange={() => handleColorChange(colorCategory.name)} />
              <span>{colorCategory.name}</span>
            </label>
          </li>
        ))}
      </ul> */}
        </FormWrapper>
    );
}