"use client";
import React, { useRef, useState } from "react";
import DynamicImageUploader, {
  DynamicImageUploaderRef,
} from "../../DynamicImageUploader";
import TextArea from "@/app/components/form/TextArea";

const limit = 3;

export default function ArtworkHighlight() {
  const uploaderRef = useRef<DynamicImageUploaderRef>(null);
  const [referenceNote, setReferenceNote] = useState("");

  return (
    <>
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 align-middle">
        <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center md:w-2/3">
          <h2 className="vision">
            Upload your <span className="font-medium">artwork</span>
          </h2>
          <p className="text-xs/4 font-light md:text-sm">
            Think of a flower you love, an animal you feel drawn to, or a symbol
            that holds meaning for you
          </p>
        </div>

        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent">
            <div className="mx-auto mt-4 flex w-full flex-col items-center justify-center gap-10 md:w-[50%]">
              <DynamicImageUploader
                ref={uploaderRef}
                storageId="ArtworkHighlight"
                limit={limit}
                showDescription={true}
                showArtistName={false}
                showSource={true}
                uploadMessage={(count, limit) =>
                  `Upload ${count} of ${limit} artwork image${limit > 1 ? "s" : ""}`
                }
              />
              <TextArea
                label=""
                name="dyv_sort_intro"
                maxLength={1000}
                placeholder="Or just share your artwork visions with words"
                showLimitMessage={true}
                required={false}
                value={referenceNote}
                onChange={(e) => setReferenceNote(e.target.value)}
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}