"use client";

export default function Page({
  isPdfProof,
  setIsPdfProof,
  submitDesign,
}: {
  isPdfProof: boolean;
  setIsPdfProof: (value: boolean) => void;
  submitDesign: () => void;
}) {
  return (
    <div className="w-full max-w-md">
      <div className="border border-gray-200 shadow-sm rounded-lg">
        <div className="w-full border-b border-gray-200 mb-2 pb-2 pt-2">
          <h2 className="text-lg font-medium text-gray-900 ml-3">
            Select a Proofing Option.
          </h2>
        </div>
        <div className="p-6">
          <div className="space-y-6">
            {/* Print ASAP Option */}
            <div className="flex items-start space-x-3">
              <div className="flex items-center h-5">
                <input
                  id="print-asap"
                  name="proofing-option"
                  type="radio"
                  checked={isPdfProof === false}
                  onChange={() => setIsPdfProof(false)}
                  className="mt-3 h-4 w-4  border-gray-300 "
                />
              </div>
              <div className="flex-1">
                <label
                  htmlFor="print-asap"
                  className="block text-lg font-medium text-gray-900 mb-2"
                >
                  Print ASAP
                </label>
                <p className="text-base text-neutral-black-70 leading-relaxed">
                  If your file passes review, we will print it ASAP. If we find
                  a problem we can&apos;t fix, we&apos;ll contact you.
                </p>
              </div>
            </div>

            {/* PDF Proof Option */}
            <div className="flex items-start space-x-3">
              <div className="flex items-center h-4">
                <input
                  id="pdf-proof"
                  name="proofing-option"
                  type="radio"
                  checked={isPdfProof === true}
                  onChange={() => setIsPdfProof(true)}
                  className="w-4 h-4  border-gray-300 mt-8"
                />
              </div>
              <div className="flex-1">
                <label
                  htmlFor="pdf-proof"
                  className="block text-lg font-medium text-gray-900 mb-2"
                >
                  Please send me a PDF proof for approval before printing.
                </label>
                <p className="text-base text-neutral-black-70 leading-relaxed">
                  We will email you a link to a PDF proof for approval before
                  printing. Don&apos;t worry, we won&apos;t print your file
                  until you check the PDF and approve it online. Be aware this
                  could delay your order by a day or more.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Continue Button */}
      <div className="mt-8">
        <button
          className="w-full border-primary  bg-primary hover:bg-primary text-white font-medium py-3 px-6 rounded-3xl transition-colors duration-200"
          onClick={() => submitDesign()}
        >
          CONTINUE
        </button>
      </div>
    </div>
  );
}