import {FormWrapper} from './FormWrapper'
import Image from "next/image";
import {useEffect} from "react";
import {ColorRing} from "react-loader-spinner";

type LogoData = {
    brief: string,
    logo: string,
    spinner: boolean,
    generated: boolean
}

type LogoNameFormProps = LogoData & {
    updateFields: (fields: Partial<LogoData>) => void
}

export function BriefForm({brief, logo, spinner, generated, updateFields}: LogoNameFormProps) {
    useEffect(() => {
        console.log('image generated: ', logo);
    }, [logo]);

    return (
        <FormWrapper title="Please Add Some Brief" description="It is a long established fact that a reader">
            <ColorRing
                visible={spinner}
                height="80"
                width="80"
                ariaLabel="blocks-loading"
                wrapperStyle={{}}
                wrapperClass="blocks-wrapper"
                colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']}
            />

            <div className="inputCont w-full max-w-[750px]">
                {!generated ? (
                    <>
                      <textarea
                          name=""
                          id=""
                          className="min-h-[200px] h-full"
                          placeholder="Write Here..."
                          onChange={(e) => updateFields({brief: e.target.value})}
                          value={brief}
                      />
                    </>
                ) : (
                    <>
                        <img src={logo} width={512} height={100} alt="description"/>
                    </>
                )}

            </div>
        </FormWrapper>
    )
}