import React from 'react';
import { IonIcon, IonToggle } from '@ionic/react';
import { chevronForwardOutline } from 'ionicons/icons';

interface SettingsRowProps {
  icon: string;
  iconColor?: string;
  iconBg?: string;
  title: string;
  subtitle?: string;
  onClick?: () => void;
  type?: 'link' | 'toggle' | 'button';
  checked?: boolean;
  onToggle?: (checked: boolean) => void;
  destructive?: boolean;
}

const SettingsRow: React.FC<SettingsRowProps> = ({
  icon,
  iconColor = '#6d28d9',
  iconBg = 'rgba(109,40,217,0.1)',
  title,
  subtitle,
  onClick,
  type = 'link',
  checked = false,
  onToggle,
  destructive = false,
}) => {
  const content = (
    <>
      <div
        style={{
          width: '36px',
          height: '36px',
          borderRadius: '12px',
          backgroundColor: destructive ? 'rgba(239,68,68,0.1)' : iconBg,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
        }}
      >
        <IonIcon
          icon={icon}
          style={{
            fontSize: '18px',
            color: destructive ? '#ef4444' : iconColor,
          }}
        />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            fontSize: '15px',
            fontWeight: '600',
            color: destructive ? '#ef4444' : '#111827',
          }}
        >
          {title}
        </div>
        {subtitle && (
          <div
            style={{
              fontSize: '13px',
              fontWeight: '400',
              color: '#6b7280',
              marginTop: '2px',
            }}
          >
            {subtitle}
          </div>
        )}
      </div>
      {type === 'link' && (
        <IonIcon
          icon={chevronForwardOutline}
          style={{ fontSize: '18px', color: '#9ca3af' }}
        />
      )}
      {type === 'toggle' && (
        <IonToggle
          checked={checked}
          onIonChange={(e) => onToggle && onToggle(e.detail.checked)}
          style={{ padding: 0 }}
        />
      )}
    </>
  );

  const containerStyle: React.CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    padding: '12px 16px',
    gap: '14px',
    minHeight: '56px',
    cursor: onClick || type === 'toggle' ? 'pointer' : 'default',
    backgroundColor: 'transparent',
    border: 'none',
    width: '100%',
    textAlign: 'left',
  };

  if (type === 'link' || type === 'button') {
    return (
      <button onClick={onClick} style={containerStyle}>
        {content}
      </button>
    );
  }

  return <div style={containerStyle}>{content}</div>;
};

export default SettingsRow;
