// import { useForm } from "react-hook-form";
// import { Button } from "@/shared/common/ui/button";
// import { Label } from "@/shared/common/ui/label";
// import { FormFeild } from "../types/FormFeild";
// import { Loader2 } from "lucide-react";
// import { CreateThemePayload } from "../types/themeTypes";
// import { toast } from "sonner";
// import { useState } from "react";
// import { useNavigate } from "react-router-dom";
// import { useTheme } from "../hooks/useTheme";

// interface FormData {
//   primaryColor:{
//     type:string,
//     value:string
//   },
//     SecondaryColor:{
//     type:string,
//     value:string
//   }
//   image: FileList;
//   isActive: boolean;
// }

// export const AddTheme = () => {
//   const {
//     register,
//     handleSubmit,
//     formState: { errors },
//     watch,
//   } = useForm<FormData>({
//     defaultValues: {
//       primaryColor:{
//         type:"PRIMARY_COLOR",
//         value:""
//       },
//       SecondaryColor:{
//         type:"SECONDARY_COLOR",
//         value:"",
//       },
//       isActive: true,
//       image:undefined
//     },
//   });
//   const navigate = useNavigate();
//   const {createItem}=useTheme()
//   const [isSubmitting, setIsSubmitting] = useState(false);
//   const handleCreateSubmit = async (formData: FormData) => {
//     setIsSubmitting(true);
//     try {
//       const imageFile = formData.image?.[0];
//       if (!imageFile) {
//         throw new Error("images are required");
//       }
//       const payload: CreateThemePayload = [
//         {
//             type:formData.primaryColor.type,
//             value:formData.primaryColor.value,
//             fileInfo:undefined,
//             isActive:true
//         },
//           {
//             type:formData.SecondaryColor.type,
//             value:formData.SecondaryColor.value,
//             fileInfo:undefined,
//             isActive:true
//         },
//         {
//             type:"LOGO",
//             value:"",
//             fileInfo: {
//           fileName: imageFile.name,
//           contentType: imageFile.type,
//           size: imageFile.size,
//           originalname: imageFile.name,
//         },
//             isActive:true
//         }
//       ]
//       await createItem({
//         data: payload,
//         imageFile: imageFile,
//       });
//       toast.success(" created successfully");
//       navigate(-1)
//     } catch (error) {
//       toast.error("Failed to create Theme");
//       console.error("Creation error:", error);
//     }
//   };
//   const onCancel = () => {
//     navigate(-1);
//   };
//   return (
//     <div className="max-h-[80vh] overflow-y-auto p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
//       <form onSubmit={handleSubmit(handleCreateSubmit)} className="space-y-8">
//         {/* Title Section */}
//         <div className="bg-gray-50 p-5 rounded-lg border border-gray-100">
//           <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
//             <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
//             Color
//           </h3>
//           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//             <div className="space-y-2">
//               <Label htmlFor="ThemeTitleAm" className="text-gray-700">
//                Primary color
//               </Label>
//              <div className="flex items-center gap-3">
//         <input
//           id="color"
//           type="color"
//           {...register("primaryColor.value", { required: "Color is required" })}
//           className="h-10 w-16 cursor-pointer border border-gray-300 rounded-md bg-white"
//         />
//         <span className="text-sm text-gray-600 font-mono">
//           {watch("primaryColor.value") || "#000000"}
//         </span>
//       </div>
//             </div>
//             <div className="space-y-2">
//               <Label htmlFor="ThemeTitleEn" className="text-gray-700">
//                 secondary color
//               </Label>
//                     <div className="flex items-center gap-3">
//         <input
//           id="color"
//           type="color"
//           {...register("SecondaryColor.value",{ required: "Color is required" })}
//           className="h-10 w-16 cursor-pointer border border-gray-300 rounded-md bg-white"
//         />
//         <span className="text-sm text-gray-600 font-mono">
//           {watch("SecondaryColor.value") || "#000000"}
//         </span>
//       </div>
//             </div>
//           </div>
//         </div>

//         {/* Image Upload */}
//         <div>
//           <Label htmlFor="image">Logo*</Label>
//           <FormFeild
//             id="image"
//             type="file"
//             accept="image/*"
//             {...register("image", { required: "Image is required" })}
//             error={errors.image?.message}
//           />
//         </div>

//         {/* Actions */}
//         <div className="flex justify-end gap-3 pt-6 border-t border-gray-200">
//           <Button
//             variant="outline"
//             onClick={onCancel}
//             type="button"
//             disabled={isSubmitting}
//             className="px-6 py-2 border-gray-300 text-gray-700 hover:bg-gray-50"
//           >
//             Cancel
//           </Button>

//           <Button
//             type="submit"
//             disabled={isSubmitting}
//             className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
//           >
//             {isSubmitting ? (
//               <span className="flex items-center gap-2">
//                 <Loader2 className="w-4 h-4 animate-spin" />
//                 Creating...
//               </span>
//             ) : (
//               "Create Theme"
//             )}
//           </Button>
//         </div>
//       </form>
//     </div>
//   );
// };
