"use client";

import Button from "../../../components/ui/Button";
import Input from "../../../components/ui/CustomInput";
import CustomPhoneInput from "../../../components/ui/CustomPhoneInput";
import { useForm } from "react-hook-form";
import LogoUploader from "../../../components/ui/LogoUploader";
import { useState } from "react";
import Select from "../../../components/ui/CustomSelect";

export default function PlatformSettings() {
  const {
    control,
    formState: { errors },
  } = useForm({
    defaultValues: {
      mobileNumber: "",
      currency: "USD",
    },
  });
const [logo, setLogo] = useState<string | null>(null);
const currencyOptions = [
  { label: "USD ($)", value: "USD" },
  { label: "EUR (€)", value: "EUR" },
  { label: "GBP (£)", value: "GBP" },
  { label: "INR (₹)", value: "INR" },
  { label: "AED (د.إ)", value: "AED" },
];
  return (
    <div className="w-full">
      <div className="glass-card-v2 rounded-xl p-4 xl:p-6">
        {/* Header */}
        <div className="mb-6 flex items-center gap-4 justify-between">
          <h2 className="font-body text-lg md:text-xl font-semibold text-table-text">
            Platform Settings
          </h2>

          <Button
            variant="white"
            BtnInnerclassName="px-4.5! py-3.5! text-link! text-base! md:text-lg!"
            buttonClassName="shadow-none!"
          >
            Save
          </Button>
        </div>

        <div className="space-y-6">
          {/* Logo Upload */}
          <LogoUploader
            value={logo}
            onChange={(file, preview) => {
              console.log(file);
              setLogo(preview);
            }}
          />

          {/* Form Fields */}
          <div className="grid gap-5 md:grid-cols-2">
            <Input
              label="Platform Name"
              defaultValue="KleboAI"
            />

            <CustomPhoneInput
              label="Phone Number"
              name="mobileNumber"
              control={control}
              // error={errors.mobileNumber?.message}
              placeholder="Enter Phone Number"
            />

            <Input
              label="Email Address"
              type="email"
              defaultValue="klebo@gmail.com"
              className="md:col-span-2"
            />
             <Select
                label="Currency"
                name="currency"
                control={control}
                placeholder="Select Currency"
                options={currencyOptions}
              />
          </div>
        </div>
      </div>
    </div>
  );
}