import React from 'react';
import { IonIcon } from '@ionic/react';
import {
  chevronForwardOutline,
  timeOutline,
  flashOutline,
  wifiOutline,
  medkitOutline,
} from 'ionicons/icons';

interface CareAlertPillProps {
  id: string;
  type: string;
  title: string;
  severity: 'warning' | 'neutral';
  onClick: (id: string) => void;
}

const CareAlertPill: React.FC<CareAlertPillProps> = ({
  id,
  type,
  title,
  severity,
  onClick,
}) => {
  const getIconForType = () => {
    switch (type) {
      case 'electricity_low':
        return flashOutline;
      case 'airtime_expiring':
        return wifiOutline;
      case 'medication_due':
        return medkitOutline;
      default:
        return timeOutline;
    }
  };

  const getColors = () => {
    if (severity === 'warning') {
      return { bg: 'rgba(245,158,11,0.08)', icon: '#f59e0b', text: '#111827' };
    }
    return { bg: '#ffffff', icon: '#6d28d9', text: '#111827' };
  };

  const colors = getColors();

  return (
    <button
      onClick={() => onClick(id)}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        backgroundColor: colors.bg,
        borderRadius: '24px',
        padding: '14px 16px',
        border: 'none',
        flexShrink: 0,
        maxWidth: '280px',
        cursor: 'pointer',
      }}
    >
      <IonIcon
        icon={getIconForType()}
        style={{ fontSize: '20px', color: colors.icon, flexShrink: 0 }}
      />
      <span
        style={{
          fontSize: '13px',
          fontWeight: '600',
          color: colors.text,
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {title}
      </span>
      <IonIcon
        icon={chevronForwardOutline}
        style={{ fontSize: '16px', color: '#9ca3af', marginLeft: 'auto' }}
      />
    </button>
  );
};

export default CareAlertPill;