import React from 'react';
import { IonIcon } from '@ionic/react';
import {
  cartOutline,
  medkitOutline,
  phonePortraitOutline,
  flashOutline,
} from 'ionicons/icons';

interface QuickSupportActionCardProps {
  serviceType: 'grocery' | 'medication' | 'airtime' | 'electricity';
  label: string;
  onClick: () => void;
}

const QuickSupportActionCard: React.FC<QuickSupportActionCardProps> = ({
  serviceType,
  label,
  onClick,
}) => {
  const getIconAndColor = () => {
    switch (serviceType) {
      case 'grocery':
        return {
          icon: cartOutline,
          color: '#6d28d9',
          bg: 'rgba(109,40,217,0.1)',
        };
      case 'medication':
        return {
          icon: medkitOutline,
          color: '#ef4444',
          bg: 'rgba(239,68,68,0.1)',
        };
      case 'airtime':
        return {
          icon: phonePortraitOutline,
          color: '#3b82f6',
          bg: 'rgba(59,130,246,0.1)',
        };
      case 'electricity':
        return {
          icon: flashOutline,
          color: '#f59e0b',
          bg: 'rgba(245,158,11,0.1)',
        };
      default:
        return {
          icon: cartOutline,
          color: '#6d28d9',
          bg: 'rgba(109,40,217,0.1)',
        };
    }
  };

  const { icon, color, bg } = getIconAndColor();

  return (
    <button
      onClick={onClick}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        backgroundColor: '#ffffff',
        borderRadius: '24px',
        padding: '16px',
        border: 'none',
        width: '100%',
        cursor: 'pointer',
      }}
    >
      <div
        style={{
          width: '44px',
          height: '44px',
          borderRadius: '12px',
          backgroundColor: bg,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
        }}
      >
        <IonIcon icon={icon} style={{ fontSize: '20px', color }} />
      </div>
      <span style={{ fontSize: '14px', fontWeight: '700', color: '#111827' }}>
        {label}
      </span>
    </button>
  );
};

export default QuickSupportActionCard;
