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

/**
 * Main component for 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 config
 * @param {string} props.defaultSubdomain - Default SiliconPin subdomain
 * @param {Function} props.showToast - Function to show toast notifications
 * @returns {JSX.Element} - Rendered component
 */
const DomainConfiguration = ({
                               domainConfig,
                               validation,
                               dnsVerified,
                               handlers,
                               checkDnsConfig,
                               defaultSubdomain,
                               showToast
                             }) => {
  const { useSubdomain, useCustomDomain } = domainConfig;
  const {
    handleUseSubdomainChange,
    handleUseCustomDomainChange
  } = handlers;

  return (
    <div className="pt-4 border-t border-neutral-700">
      <h3 className="text-lg font-medium text-white mb-4">Destination</h3>

      <div className="space-y-4">
        {/* SiliconPin Subdomain */}
        <div className="flex items-start gap-2">
          <input
            type="checkbox"
            id="use-subdomain"
            checked={useSubdomain}
            onChange={handleUseSubdomainChange}
            className="mt-1"
          />
          <div className="flex-1">
            <label htmlFor="use-subdomain" className="block text-white font-medium">Use SiliconPin Subdomain</label>
            <div className="mt-2 flex">
              <input
                type="text"
                id="subdomain"
                value={defaultSubdomain}
                className="rounded-l-md py-2 px-3 bg-neutral-600 border-y border-l border-neutral-600 text-neutral-300 focus:outline-none w-1/3 font-mono"
                readOnly
                aria-label="Default subdomain"
              />
              <span className="rounded-r-md py-2 px-3 bg-neutral-800 border border-neutral-700 text-neutral-400 w-2/3">.subdomain.siliconpin.com</span>
            </div>
          </div>
        </div>

        {/* Custom Domain */}
        <div className="flex items-start gap-2">
          <input
            type="checkbox"
            id="use-custom-domain"
            checked={useCustomDomain}
            onChange={handleUseCustomDomainChange}
            className="mt-1"
          />
          <div className="flex-1">
            <label htmlFor="use-custom-domain" className="block text-white font-medium">Use Custom Domain</label>

            {useCustomDomain && (
              <CustomDomain
                domainConfig={domainConfig}
                validation={validation}
                dnsVerified={dnsVerified}
                handlers={handlers}
                checkDnsConfig={checkDnsConfig}
                defaultSubdomain={defaultSubdomain}
                showToast={showToast}
              />
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default DomainConfiguration;