sp/src/components/DomainSetupForm/DomainConfiguration/CustomDomain.jsx

import React from 'react';
import DnsConfiguration from './DnsConfiguration';

/**
 * Component for custom domain configuration
 * @param {Object} props - Component props
 * @param {Object} props.domainConfig - Domain configuration state
 * @param {Object} props.validation - Domain validation state
 * @param {Object} props.dnsVerified - DNS verification state
 * @param {Object} props.handlers - Event handlers for domain config
 * @param {Function} props.checkDnsConfig - Function to check DNS configuration
 * @param {string} props.defaultSubdomain - Default SiliconPin subdomain
 * @param {Function} props.showToast - Function to show toast notifications
 * @returns {JSX.Element} - Rendered component
 */
const CustomDomain = ({
                        domainConfig,
                        validation,
                        dnsVerified,
                        handlers,
                        checkDnsConfig,
                        defaultSubdomain,
                        showToast
                      }) => {
  const {
    domainType,
    customDomain,
    customSubdomain,
    dnsMethod
  } = domainConfig;

  const {
    isValidating,
    isValidDomain,
    validationMessage,
    showDnsConfig
  } = validation;

  const {
    handleDomainTypeChange,
    handleDomainChange,
    handleSubdomainChange,
    handleDnsMethodChange,
    validateDomain
  } = handlers;

  return (
    <div className="mt-3 space-y-4">
      {/* Domain Type Selection */}
      <div className="flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
        <div className="flex items-center">
          <input
            type="radio"
            id="domain-type-domain"
            name="domain-type"
            value="domain"
            checked={domainType === 'domain'}
            onChange={handleDomainTypeChange}
            className="mr-2"
          />
          <label htmlFor="domain-type-domain" className="text-white">Root Domain</label>
        </div>

        <div className="flex items-center">
          <input
            type="radio"
            id="domain-type-subdomain"
            name="domain-type"
            value="subdomain"
            checked={domainType === 'subdomain'}
            onChange={handleDomainTypeChange}
            className="mr-2"
          />
          <label htmlFor="domain-type-subdomain" className="text-white">Subdomain</label>
        </div>
      </div>

      {/* Domain Input */}
      {domainType === 'domain' ? (
        <div>
          <input
            type="text"
            id="custom-domain"
            value={customDomain}
            onChange={handleDomainChange}
            placeholder="yourdomain.com"
            aria-label="Enter root domain"
            className="w-full rounded-md py-2 px-3 bg-neutral-700 border border-neutral-600 text-white focus:outline-none focus:ring-2 focus:ring-[#6d9e37]"
          />
          <p className="mt-1 text-xs text-neutral-400">
            Enter domain without http://, www, or trailing slashes (example.com). You can configure www or other subdomains later.
          </p>
        </div>
      ) : (
        <div>
          <input
            type="text"
            id="custom-subdomain"
            value={customSubdomain}
            onChange={handleSubdomainChange}
            placeholder="blog.yourdomain.com"
            aria-label="Enter subdomain"
            className="w-full rounded-md py-2 px-3 bg-neutral-700 border border-neutral-600 text-white focus:outline-none focus:ring-2 focus:ring-[#6d9e37]"
          />
          <p className="mt-1 text-xs text-neutral-400">
            Enter the full subdomain without http:// or trailing slashes. www and protocol prefixes will be automatically removed.
          </p>
        </div>
      )}

      {/* Domain Validation */}
      <button
        type="button"
        onClick={validateDomain}
        disabled={isValidating}
        className="px-4 py-2 bg-neutral-600 text-white font-medium rounded-md hover:bg-neutral-500 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isValidating ? 'Validating...' : 'Validate Domain'}
      </button>

      {/* Validation Status */}
      {isValidating && (
        <div className="p-3 bg-neutral-700/50 rounded-md">
          <div className="flex items-center justify-center space-x-2">
            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
            <p className="text-white">Verifying domain registration and availability...</p>
          </div>
        </div>
      )}

      {!isValidating && validationMessage && (
        <div className={`p-3 rounded-md ${isValidDomain ? 'bg-green-900/20 border border-green-700/50' : 'bg-red-900/20 border border-red-700/50'}`}>
          <p className={isValidDomain ? 'text-green-400' : 'text-red-400'}>
            {validationMessage}
          </p>
        </div>
      )}

      {/* DNS Configuration Options */}
      {showDnsConfig && (
        <DnsConfiguration
          domainType={domainType}
          dnsMethod={dnsMethod}
          defaultSubdomain={defaultSubdomain}
          dnsVerified={dnsVerified}
          onDnsMethodChange={handleDnsMethodChange}
          checkDnsConfig={checkDnsConfig}
          showToast={showToast}
        />
      )}
    </div>
  );
};

export default CustomDomain;