import React from 'react'

/** storefront-style section card: header strip with icon tile, title, subtitle and optional badge. */
export function SettingsCard({ icon: Icon, iconClass = 'bg-slate-100 text-slate-700', title, subtitle, badge, right, children, bodyClass = 'p-5 space-y-5', ...rest }) {
  return (
    <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden mb-6" {...rest}>
      <div className="px-5 py-3.5 border-b border-gray-200 bg-gray-50/75 flex items-center justify-between gap-4">
        <div className="flex items-center gap-2.5 min-w-0">
          {Icon && (
            <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${iconClass}`}>
              <Icon className="w-4 h-4" aria-hidden="true" />
            </div>
          )}
          <div className="min-w-0">
            <h3 className="text-sm font-semibold text-gray-900">{title}</h3>
            {subtitle && <p className="text-xs text-gray-500">{subtitle}</p>}
          </div>
        </div>
        {badge && (
          <span className="text-xs px-2.5 py-1 rounded-full font-medium bg-gray-100 text-gray-600 border border-gray-200/60 flex-shrink-0">{badge}</span>
        )}
        {right}
      </div>
      {children && <div className={bodyClass}>{children}</div>}
    </div>
  )
}

/** Accessible on/off switch (the reference builder <Switch />). */
export function Switch({ checked, onChange, label, size = 'md', id }) {
  const dims = size === 'sm'
    ? 'w-9 h-5 after:h-4 after:w-4'
    : 'w-11 h-6 after:h-5 after:w-5'
  return (
    <label className="relative inline-flex items-center cursor-pointer flex-shrink-0" title={checked ? 'Enabled' : 'Disabled'}>
      <input
        id={id}
        type="checkbox"
        role="switch"
        aria-label={label}
        checked={!!checked}
        onChange={(e) => onChange(e.target.checked)}
        className="sr-only peer"
      />
      <div className={`${dims} bg-gray-200 peer-focus-visible:ring-2 peer-focus-visible:ring-gray-400 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all peer-checked:bg-emerald-600`}></div>
    </label>
  )
}

export const fieldInputCls = 'w-full px-3 py-2 bg-gray-50/50 border border-gray-200 rounded-lg text-sm transition-colors focus:bg-white focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent'
export const fieldLabelCls = 'block text-sm font-medium text-gray-700 mb-1.5'