"use client";
import { useState } from 'react';

const FormElementPage = () => {
  const [checkboxStates, setCheckboxStates] = useState({
    default: false,
    checked: true,
    disabled: true
  });

  const [radioStates, setRadioStates] = useState({
    default: false,
    secondary: true,
    disabled: false
  });

  const [toggleStates, setToggleStates] = useState({
    default: false,
    checked: true,
    disabled: false,
    defaultDark: false,
    checkedDark: true,
    disabledDark: false
  });

  const [selectedCountry, setSelectedCountry] = useState('US');
  const [phoneNumber, setPhoneNumber] = useState('');

  const countryCodes = {
    'US': '+1',
    'GB': '+44',
    'CA': '+1',
    'AU': '+61'
  };

  const handleCountryChange = (e) => {
    const country = e.target.value;
    setSelectedCountry(country);
    setPhoneNumber(countryCodes[country]);
  };

  const copyToClipboard = () => {
    const input = document.getElementById('website-input');
    input.select();
    document.execCommand('copy');
    const copyText = document.getElementById('copy-text');
    copyText.textContent = 'Copied!';
    setTimeout(() => {
      copyText.textContent = 'Copy';
    }, 2000);
  };

  return (
    <div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
        <div className="space-y-6">
          {/* Default Inputs */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Default Inputs
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              {/* Input */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Input
                </label>
                <input
                  type="text"
                  className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                />
              </div>

              {/* Input with Placeholder */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Input with Placeholder
                </label>
                <input
                  type="text"
                  placeholder="info@gmail.com"
                  className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                />
              </div>

              {/* Select Input */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Select Input
                </label>
                <div className="relative z-20 bg-transparent">
                  <select className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Select Option
                    </option>
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Marketing
                    </option>
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Template
                    </option>
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Development
                    </option>
                  </select>
                  <span className="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                    <svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                </div>
              </div>

              {/* Password Input */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Password Input
                </label>
                <div className="relative">
                  <input
                    type="password"
                    placeholder="Enter your password"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                  <span className="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer">
                    <svg className="fill-gray-500 dark:fill-gray-400" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fillRule="evenodd" clipRule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" />
                    </svg>
                  </span>
                </div>
              </div>

              {/* Date Picker Input */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Date Picker Input
                </label>
                <div className="relative">
                  <input
                    type="date"
                    placeholder="Select date"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                  <span className="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                    <svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fillRule="evenodd" clipRule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" />
                    </svg>
                  </span>
                </div>
              </div>

              {/* Time Select Input */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Time Select Input
                </label>
                <div className="relative">
                  <input
                    type="time"
                    placeholder="12:00 AM"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                  <span className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                    <svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fillRule="evenodd" clipRule="evenodd" d="M3.04175 9.99984C3.04175 6.15686 6.1571 3.0415 10.0001 3.0415C13.8431 3.0415 16.9584 6.15686 16.9584 9.99984C16.9584 13.8428 13.8431 16.9582 10.0001 16.9582C6.1571 16.9582 3.04175 13.8428 3.04175 9.99984ZM10.0001 1.5415C5.32867 1.5415 1.54175 5.32843 1.54175 9.99984C1.54175 14.6712 5.32867 18.4582 10.0001 18.4582C14.6715 18.4582 18.4584 14.6712 18.4584 9.99984C18.4584 5.32843 14.6715 1.5415 10.0001 1.5415ZM9.99998 10.7498C9.58577 10.7498 9.24998 10.4141 9.24998 9.99984V5.4165C9.24998 5.00229 9.58577 4.6665 9.99998 4.6665C10.4142 4.6665 10.75 5.00229 10.75 5.4165V9.24984H13.3334C13.7476 9.24984 14.0834 9.58562 14.0834 9.99984C14.0834 10.4141 13.7476 10.7498 13.3334 10.7498H10.0001H9.99998Z" />
                    </svg>
                  </span>
                </div>
              </div>

              {/* Input with Payment */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Input with Payment
                </label>
                <div className="relative">
                  <input
                    type="text"
                    placeholder="Card number"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                  <span className="absolute top-1/2 left-0 flex h-11 w-[46px] -translate-y-1/2 items-center justify-center border-r border-gray-200 dark:border-gray-800">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <circle cx="6.25" cy="10" r="5.625" fill="#E80B26" />
                      <circle cx="13.75" cy="10" r="5.625" fill="#F59D31" />
                      <path d="M10 14.1924C11.1508 13.1625 11.875 11.6657 11.875 9.99979C11.875 8.33383 11.1508 6.8371 10 5.80713C8.84918 6.8371 8.125 8.33383 8.125 9.99979C8.125 11.6657 8.84918 13.1625 10 14.1924Z" fill="#FC6020" />
                    </svg>
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Select Inputs */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Select Inputs
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              {/* Select Input */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Select Input
                </label>
                <div className="relative z-20 bg-transparent">
                  <select className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Select Option
                    </option>
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Marketing
                    </option>
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Template
                    </option>
                    <option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                      Development
                    </option>
                  </select>
                  <span className="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-700 dark:text-gray-400">
                    <svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                </div>
              </div>

              {/* Multiple Select Options */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Multiple Select Options
                </label>
                <div>
                  <select className="hidden" id="select">
                    <option value="1">Option 2</option>
                    <option value="2">Option 3</option>
                    <option value="3">Option 4</option>
                    <option value="4">Option 5</option>
                  </select>

                  <div className="flex flex-col items-center">
                    <input name="values" type="hidden" />
                    <div className="relative z-20 inline-block w-full">
                      <div className="relative flex flex-col items-center">
                        <div className="w-full">
                          <div className="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 pr-3 pl-3 outline-hidden transition dark:border-gray-700 dark:bg-gray-900">
                            <div className="flex flex-auto flex-wrap gap-2">
                              {/* Selected options would be rendered here */}
                            </div>
                            <div className="flex w-7 items-center py-1 pr-1 pl-1">
                              <button type="button" className="h-5 w-5 cursor-pointer text-gray-700 outline-hidden focus:outline-hidden dark:text-gray-400">
                                <svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                </svg>
                              </button>
                            </div>
                          </div>
                        </div>
                        <div className="w-full px-4">
                          <div className="max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900">
                            <div className="flex w-full flex-col">
                              {/* Options would be rendered here */}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Textarea input field */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Textarea input field
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              {/* Description */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Description
                </label>
                <textarea
                  placeholder="Enter a description..."
                  type="text"
                  rows="6"
                  className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                ></textarea>
              </div>

              {/* Disabled Description */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15">
                  Description
                </label>
                <textarea
                  placeholder="Enter a description..."
                  type="text"
                  rows="6"
                  disabled
                  className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-0 focus:outline-hidden disabled:border-gray-100 disabled:bg-gray-50 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:disabled:border-gray-800 dark:disabled:bg-white/[0.03] dark:disabled:placeholder:text-white/15"
                ></textarea>
              </div>

              {/* Error Description */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Description
                </label>
                <textarea
                  placeholder="Enter a description..."
                  type="text"
                  rows="6"
                  className="dark:bg-dark-900 border-red-300 shadow-theme-xs focus:border-red-300 focus:ring-red-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                ></textarea>
                <p className="text-[11px] text-red-500">
                  Please enter a message in the textarea.
                </p>
              </div>
            </div>
          </div>

          {/* Input States */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Input States
              </h3>
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                Validation styles for error, success and disabled states on form controls.
              </p>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              {/* Error State */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Email
                </label>
                <div className="relative">
                  <input
                    type="text"
                    value="demoemail"
                    className="dark:bg-dark-900 border-red-300 shadow-theme-xs focus:border-red-300 focus:ring-red-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                  <span className="absolute top-1/2 right-3.5 -translate-y-1/2">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fillRule="evenodd" clipRule="evenodd" d="M2.58325 7.99967C2.58325 5.00813 5.00838 2.58301 7.99992 2.58301C10.9915 2.58301 13.4166 5.00813 13.4166 7.99967C13.4166 10.9912 10.9915 13.4163 7.99992 13.4163C5.00838 13.4163 2.58325 10.9912 2.58325 7.99967ZM7.99992 1.08301C4.17995 1.08301 1.08325 4.17971 1.08325 7.99967C1.08325 11.8196 4.17995 14.9163 7.99992 14.9163C11.8199 14.9163 14.9166 11.8196 14.9166 7.99967C14.9166 4.17971 11.8199 1.08301 7.99992 1.08301ZM7.09932 5.01639C7.09932 5.51345 7.50227 5.91639 7.99932 5.91639H7.99999C8.49705 5.91639 8.89999 5.51345 8.89999 5.01639C8.89999 4.51933 8.49705 4.11639 7.99999 4.11639H7.99932C7.50227 4.11639 7.09932 4.51933 7.09932 5.01639ZM7.99998 11.8306C7.58576 11.8306 7.24998 11.4948 7.24998 11.0806V7.29627C7.24998 6.88206 7.58576 6.54627 7.99998 6.54627C8.41419 6.54627 8.74998 6.88206 8.74998 7.29627V11.0806C8.74998 11.4948 8.41419 11.8306 7.99998 11.8306Z" fill="#F04438" />
                    </svg>
                  </span>
                </div>
                <p className="text-[11px] text-red-500 mt-1.5">
                  This is an error message.
                </p>
              </div>

              {/* Success State */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Email
                </label>
                <div className="relative">
                  <input
                    type="text"
                    value="demoemail@gmail.com"
                    className="dark:bg-dark-900 border-success-300 shadow-theme-xs focus:border-success-300 focus:ring-success-500/10 dark:border-success-700 dark:focus:border-success-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                  <span className="absolute top-1/2 right-3.5 -translate-y-1/2">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fillRule="evenodd" clipRule="evenodd" d="M2.61792 8.00034C2.61792 5.02784 5.0276 2.61816 8.00009 2.61816C10.9726 2.61816 13.3823 5.02784 13.3823 8.00034C13.3823 10.9728 10.9726 13.3825 8.00009 13.3825C5.0276 13.3825 2.61792 10.9728 2.61792 8.00034ZM8.00009 1.11816C4.19917 1.11816 1.11792 4.19942 1.11792 8.00034C1.11792 11.8013 4.19917 14.8825 8.00009 14.8825C11.801 14.8825 14.8823 11.8013 14.8823 8.00034C14.8823 4.19942 11.801 1.11816 8.00009 1.11816ZM10.5192 7.266C10.8121 6.97311 10.8121 6.49823 10.5192 6.20534C10.2264 5.91245 9.75148 5.91245 9.45858 6.20534L7.45958 8.20434L6.54162 7.28638C6.24873 6.99349 5.77385 6.99349 5.48096 7.28638C5.18807 7.57927 5.18807 8.05415 5.48096 8.34704L6.92925 9.79533C7.0699 9.93599 7.26067 10.015 7.45958 10.015C7.6585 10.015 7.84926 9.93599 7.98991 9.79533L10.5192 7.266Z" fill="#12B76A" />
                    </svg>
                  </span>
                </div>
                <p className="text-[11px] text-green-700 mt-1.5">
                  This is an success message.
                </p>
              </div>

              {/* Disabled State */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15">
                  Email
                </label>
                <input
                  type="text"
                  placeholder="info@gmail.com"
                  disabled
                  className="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-hidden disabled:border-gray-100 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-400 dark:disabled:border-gray-800 dark:disabled:placeholder:text-white/15"
                />
              </div>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          {/* Input Group */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Input Group
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              {/* Email with icon */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Email
                </label>
                <div className="relative">
                  <span className="absolute top-1/2 left-0 -translate-y-1/2 border-r border-gray-200 px-3.5 py-3 text-gray-500 dark:border-gray-800 dark:text-gray-400">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fillRule="evenodd" clipRule="evenodd" d="M3.04175 7.06206V14.375C3.04175 14.6511 3.26561 14.875 3.54175 14.875H16.4584C16.7346 14.875 16.9584 14.6511 16.9584 14.375V7.06245L11.1443 11.1168C10.457 11.5961 9.54373 11.5961 8.85638 11.1168L3.04175 7.06206ZM16.9584 5.19262C16.9584 5.19341 16.9584 5.1942 16.9584 5.19498V5.20026C16.9572 5.22216 16.946 5.24239 16.9279 5.25501L10.2864 9.88638C10.1145 10.0062 9.8862 10.0062 9.71437 9.88638L3.07255 5.25485C3.05342 5.24151 3.04202 5.21967 3.04202 5.19636C3.042 5.15695 3.07394 5.125 3.11335 5.125H16.8871C16.9253 5.125 16.9564 5.15494 16.9584 5.19262ZM18.4584 5.21428V14.375C18.4584 15.4796 17.563 16.375 16.4584 16.375H3.54175C2.43718 16.375 1.54175 15.4796 1.54175 14.375V5.19498C1.54175 5.1852 1.54194 5.17546 1.54231 5.16577C1.55858 4.31209 2.25571 3.625 3.11335 3.625H16.8871C17.7549 3.625 18.4584 4.32843 18.4585 5.19622C18.4585 5.20225 18.4585 5.20826 18.4584 5.21428Z" fill="#667085" />
                    </svg>
                  </span>
                  <input
                    type="text"
                    placeholder="info@gmail.com"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                </div>
              </div>

              {/* Phone with country code */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Phone
                </label>
                <div className="relative">
                  <div className="absolute">
                    <select
                      value={selectedCountry}
                      onChange={handleCountryChange}
                      className="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-l-lg border-0 border-r border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
                    >
                      <option value="US" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        US
                      </option>
                      <option value="GB" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        GB
                      </option>
                      <option value="CA" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        CA
                      </option>
                      <option value="AU" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        AU
                      </option>
                    </select>
                    <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400">
                      <svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </div>
                  </div>
                  <input
                    placeholder="+1 (555) 000-0000"
                    value={phoneNumber}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                    type="tel"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-4 pl-[84px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                </div>
              </div>

              {/* Phone with right country code */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Phone
                </label>
                <div className="relative">
                  <div className="absolute right-0">
                    <select
                      value={selectedCountry}
                      onChange={handleCountryChange}
                      className="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-r-lg border-0 border-l border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
                    >
                      <option value="US" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        US
                      </option>
                      <option value="GB" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        GB
                      </option>
                      <option value="CA" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        CA
                      </option>
                      <option value="AU" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                        AU
                      </option>
                    </select>
                    <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400">
                      <svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </div>
                  </div>
                  <input
                    placeholder="+1 (555) 000-0000"
                    value={phoneNumber}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                    type="tel"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-[84px] pl-3 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                </div>
              </div>

              {/* URL with prefix */}
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  URL
                </label>
                <div className="relative">
                  <span className="absolute top-1/2 left-0 inline-flex h-11 -translate-y-1/2 items-center justify-center border-r border-gray-200 py-3 pr-3 pl-3.5 text-gray-500 dark:border-gray-800 dark:text-gray-400">
                    http://
                  </span>
                  <input
                    type="url"
                    placeholder="www.tailadmin.com"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pl-[90px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                </div>
              </div>

              {/* Website with copy button */}
              <div id="copy-input">
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Website
                </label>
                <div className="relative">
                  <button
                    id="copy-button"
                    onClick={copyToClipboard}
                    className="absolute top-1/2 right-0 inline-flex -translate-y-1/2 cursor-pointer items-center gap-1 border-l border-gray-200 py-3 pr-3 pl-3.5 text-sm font-medium text-gray-700 dark:border-gray-800 dark:text-gray-400"
                  >
                    <svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fillRule="evenodd" clipRule="evenodd" d="M6.58822 4.58398C6.58822 4.30784 6.81207 4.08398 7.08822 4.08398H15.4154C15.6915 4.08398 15.9154 4.30784 15.9154 4.58398L15.9154 12.9128C15.9154 13.189 15.6916 13.4128 15.4154 13.4128H7.08821C6.81207 13.4128 6.58822 13.189 6.58822 12.9128V4.58398ZM7.08822 2.58398C5.98365 2.58398 5.08822 3.47942 5.08822 4.58398V5.09416H4.58496C3.48039 5.09416 2.58496 5.98959 2.58496 7.09416V15.4161C2.58496 16.5207 3.48039 17.4161 4.58496 17.4161H12.9069C14.0115 17.4161 14.9069 16.5207 14.9069 15.4161L14.9069 14.9128H15.4154C16.52 14.9128 17.4154 14.0174 17.4154 12.9128L17.4154 4.58398C17.4154 3.47941 16.52 2.58398 15.4154 2.58398H7.08822ZM13.4069 14.9128H7.08821C5.98364 14.9128 5.08822 14.0174 5.08822 12.9128V6.59416H4.58496C4.30882 6.59416 4.08496 6.81801 4.08496 7.09416V15.4161C4.08496 15.6922 4.30882 15.9161 4.58496 15.9161H12.9069C13.183 15.9161 13.4069 15.6922 13.4069 15.4161L13.4069 14.9128Z" fill="" />
                    </svg>
                    <div id="copy-text">Copy</div>
                  </button>
                  <input
                    value="www.tailadmin.com"
                    type="url"
                    id="website-input"
                    className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-[90px] pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                  />
                </div>
              </div>
            </div>
          </div>

          {/* File Input */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                File Input
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                  Upload file
                </label>
                <input
                  type="file"
                  className="focus:border-ring-brand-300 shadow-theme-xs focus:file:ring-brand-300 h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-transparent text-sm text-gray-500 transition-colors file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-gray-50 file:py-3 file:pr-3 file:pl-3.5 file:text-sm file:text-gray-700 placeholder:text-gray-400 hover:file:bg-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:text-white/90 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400 dark:placeholder:text-gray-400"
                />
              </div>
            </div>
          </div>

          {/* Checkboxes */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Checkboxes
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              <div className="flex flex-wrap items-center gap-8">
                {/* Default Checkbox */}
                <div>
                  <label htmlFor="checkboxLabelOne" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="checkboxLabelOne"
                        className="sr-only"
                        checked={checkboxStates.default}
                        onChange={() => setCheckboxStates({...checkboxStates, default: !checkboxStates.default})}
                      />
                      <div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.default ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
                        <span className={checkboxStates.default ? '' : 'opacity-0'}>
                          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </span>
                      </div>
                    </div>
                    Default
                  </label>
                </div>

                {/* Checked Checkbox */}
                <div>
                  <label htmlFor="checkboxLabelTwo" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="checkboxLabelTwo"
                        className="sr-only"
                        checked={checkboxStates.checked}
                        onChange={() => setCheckboxStates({...checkboxStates, checked: !checkboxStates.checked})}
                      />
                      <div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.checked ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
                        <span className={checkboxStates.checked ? '' : 'opacity-0'}>
                          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </span>
                      </div>
                    </div>
                    Checked
                  </label>
                </div>

                {/* Disabled Checkbox */}
                <div>
                  <label htmlFor="checkboxLabelThree" className="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="checkboxLabelThree"
                        className="peer sr-only"
                        checked={checkboxStates.disabled}
                        onChange={() => setCheckboxStates({...checkboxStates, disabled: !checkboxStates.disabled})}
                        disabled
                      />
                      <div className={`mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.disabled ? 'bg-transparent border-gray-200 dark:border-gray-800' : 'border-brand-500 bg-brand-500'}`}>
                        <span className={checkboxStates.disabled ? '' : 'opacity-0'}>
                          <svg className="stroke-gray-200 dark:stroke-gray-800" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="" strokeWidth="2.33333" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </span>
                      </div>
                    </div>
                    Disabled
                  </label>
                </div>
              </div>
            </div>
          </div>

          {/* Radio Buttons */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Radio Buttons
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              <div className="flex flex-wrap items-center gap-8">
                {/* Default Radio */}
                <div>
                  <label htmlFor="radioLabelOne" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="radio"
                        id="radioLabelOne"
                        name="radioGroup"
                        className="sr-only"
                        checked={radioStates.default}
                        onChange={() => setRadioStates({...radioStates, default: !radioStates.default})}
                      />
                      <div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.default ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
                        <span className={`h-2 w-2 rounded-full ${radioStates.default ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
                      </div>
                    </div>
                    Default
                  </label>
                </div>

                {/* Secondary Radio */}
                <div>
                  <label htmlFor="radioLabelTwo" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="radio"
                        id="radioLabelTwo"
                        name="radioGroup"
                        className="sr-only"
                        checked={radioStates.secondary}
                        onChange={() => setRadioStates({...radioStates, secondary: !radioStates.secondary})}
                      />
                      <div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.secondary ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
                        <span className={`h-2 w-2 rounded-full ${radioStates.secondary ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
                      </div>
                    </div>
                    Secondary
                  </label>
                </div>

                {/* Disabled Radio */}
                <div>
                  <label htmlFor="radioLabelThree" className="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700">
                    <div className="relative">
                      <input
                        type="radio"
                        id="radioLabelThree"
                        name="radioGroup"
                        className="peer sr-only"
                        checked={radioStates.disabled}
                        onChange={() => setRadioStates({...radioStates, disabled: !radioStates.disabled})}
                        disabled
                      />
                      <div className={`mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.disabled ? 'bg-transparent border-gray-300 dark:border-gray-700' : 'border-brand-500 bg-brand-500'}`}>
                        <span className={`h-2 w-2 rounded-full ${radioStates.disabled ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
                      </div>
                    </div>
                    Disabled Secondary
                  </label>
                </div>
              </div>
            </div>
          </div>

          {/* Toggle switch input */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Toggle switch input
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              <div className="mb-6 flex flex-wrap items-center gap-6 sm:gap-8">
                {/* Default Toggle */}
                <div>
                  <label htmlFor="toggle1" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="toggle1"
                        className="sr-only"
                        checked={toggleStates.default}
                        onChange={() => setToggleStates({...toggleStates, default: !toggleStates.default})}
                      />
                      <div className={`block h-6 w-11 rounded-full ${toggleStates.default ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'}`}></div>
                      <div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.default ? 'translate-x-full' : 'translate-x-0'}`}></div>
                    </div>
                    Default
                  </label>
                </div>

                {/* Checked Toggle */}
                <div>
                  <label htmlFor="toggle2" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="toggle2"
                        className="sr-only"
                        checked={toggleStates.checked}
                        onChange={() => setToggleStates({...toggleStates, checked: !toggleStates.checked})}
                      />
                      <div className={`block h-6 w-11 rounded-full ${toggleStates.checked ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'}`}></div>
                      <div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.checked ? 'translate-x-full' : 'translate-x-0'}`}></div>
                    </div>
                    Checked
                  </label>
                </div>

                {/* Disabled Toggle */}
                <div>
                  <label htmlFor="toggle3" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="toggle3"
                        className="sr-only"
                        checked={toggleStates.disabled}
                        onChange={() => setToggleStates({...toggleStates, disabled: !toggleStates.disabled})}
                        disabled
                      />
                      <div className={`block h-6 w-11 rounded-full ${toggleStates.disabled ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-100 dark:bg-gray-800'}`}></div>
                      <div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear ${toggleStates.disabled ? 'translate-x-full' : 'translate-x-0'}`}></div>
                    </div>
                    Disabled
                  </label>
                </div>
              </div>

              <div className="flex flex-wrap items-center gap-6 sm:gap-8">
                {/* Default Dark Toggle */}
                <div>
                  <label htmlFor="toggle11" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="toggle11"
                        className="sr-only"
                        checked={toggleStates.defaultDark}
                        onChange={() => setToggleStates({...toggleStates, defaultDark: !toggleStates.defaultDark})}
                      />
                      <div className="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"></div>
                      <div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.defaultDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
                    </div>
                    Default
                  </label>
                </div>

                {/* Checked Dark Toggle */}
                <div>
                  <label htmlFor="toggle22" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="toggle22"
                        className="sr-only"
                        checked={toggleStates.checkedDark}
                        onChange={() => setToggleStates({...toggleStates, checkedDark: !toggleStates.checkedDark})}
                      />
                      <div className="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"></div>
                      <div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.checkedDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
                    </div>
                    Checked
                  </label>
                </div>

                {/* Disabled Dark Toggle */}
                <div>
                  <label htmlFor="toggle33" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none">
                    <div className="relative">
                      <input
                        type="checkbox"
                        id="toggle33"
                        className="sr-only"
                        checked={toggleStates.disabledDark}
                        onChange={() => setToggleStates({...toggleStates, disabledDark: !toggleStates.disabledDark})}
                        disabled
                      />
                      <div className="block h-6 w-11 rounded-full bg-gray-100 dark:bg-gray-800"></div>
                      <div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear ${toggleStates.disabledDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
                    </div>
                    Disabled
                  </label>
                </div>
              </div>
            </div>
          </div>

          {/* Dropzone */}
          <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div className="px-5 py-4 sm:px-6 sm:py-5">
              <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
                Dropzone
              </h3>
            </div>
            <div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
              <div className="hover:border-brand-500! dark:hover:border-brand-500! rounded-xl border border-dashed! border-gray-300! bg-gray-50 p-7 lg:p-10 dark:border-gray-700! dark:bg-gray-900">
                <div className="dz-message m-0!">
                  <div className="mb-[22px] flex justify-center">
                    <div className="flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
                      <svg className="fill-current" width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fillRule="evenodd" clipRule="evenodd" d="M14.5019 3.91699C14.2852 3.91699 14.0899 4.00891 13.953 4.15589L8.57363 9.53186C8.28065 9.82466 8.2805 10.2995 8.5733 10.5925C8.8661 10.8855 9.34097 10.8857 9.63396 10.5929L13.7519 6.47752V18.667C13.7519 19.0812 14.0877 19.417 14.5019 19.417C14.9161 19.417 15.2519 19.0812 15.2519 18.667V6.48234L19.3653 10.5929C19.6583 10.8857 20.1332 10.8855 20.426 10.5925C20.7188 10.2995 20.7186 9.82463 20.4256 9.53184L15.0838 4.19378C14.9463 4.02488 14.7367 3.91699 14.5019 3.91699ZM5.91626 18.667C5.91626 18.2528 5.58047 17.917 5.16626 17.917C4.75205 17.917 4.41626 18.2528 4.41626 18.667V21.8337C4.41626 23.0763 5.42362 24.0837 6.66626 24.0837H22.3339C23.5766 24.0837 24.5839 23.0763 24.5839 21.8337V18.667C24.5839 18.2528 24.2482 17.917 23.8339 17.917C23.4197 17.917 23.0839 18.2528 23.0839 18.667V21.8337C23.0839 22.2479 22.7482 22.5837 22.3339 22.5837H6.66626C6.25205 22.5837 5.91626 22.2479 5.91626 21.8337V18.667Z" fill="" />
                      </svg>
                    </div>
                  </div>

                  <h4 className="text-theme-xl mb-3 font-semibold text-gray-800 dark:text-white/90">
                    Drop File Here
                  </h4>
                  <span className="mx-auto mb-5 block w-full max-w-[290px] text-sm text-gray-700 dark:text-gray-400">
                    Drag and drop your PNG, JPG, WebP, SVG images here or browse
                  </span>

                  <span className="text-theme-sm text-brand-500 font-medium underline">
                    Browse File
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FormElementPage;