appcakes-builds/src/components/RecipientCareCard.tsx

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

export interface CareStatus {
  serviceType: 'grocery' | 'medication' | 'electricity' | 'airtime';
  label: string;
  statusText: string;
  isOk: boolean;
}

export interface RecipientSummary {
  id: string;
  firstName: string;
  lastName: string;
  location: string;
  avatarUrl: string | null;
  statuses: CareStatus[];
}

interface RecipientCareCardProps {
  recipient: RecipientSummary;
  onSendSupport: (id: string) => void;
  onMenuClick?: (id: string) => void;
}

const getIconForService = (type: string) => {
  switch (type) {
    case 'grocery':
      return cartOutline;
    case 'medication':
      return medkitOutline;
    case 'electricity':
      return flashOutline;
    default:
      return cartOutline;
  }
};

const getColorForService = (type: string) => {
  switch (type) {
    case 'grocery':
      return '#6d28d9';
    case 'medication':
      return '#ef4444';
    case 'electricity':
      return '#f59e0b';
    default:
      return '#3b82f6';
  }
};

const RecipientCareCard: React.FC<RecipientCareCardProps> = ({
  recipient,
  onSendSupport,
  onMenuClick,
}) => {
  return (
    <div
      style={{
        backgroundColor: '#ffffff',
        borderRadius: '24px',
        padding: '16px',
        width: '292px',
        display: 'flex',
        flexDirection: 'column',
        gap: '14px',
        flexShrink: 0,
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div
            style={{
              width: '48px',
              height: '48px',
              borderRadius: '16px',
              backgroundColor: 'rgba(109,40,217,0.1)',
              overflow: 'hidden',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {recipient.avatarUrl ? (
              <img
                src={recipient.avatarUrl}
                alt={recipient.firstName}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              />
            ) : (
              <span
                style={{
                  fontSize: '18px',
                  fontWeight: '700',
                  color: '#6d28d9',
                }}
              >
                {recipient.firstName.charAt(0)}
              </span>
            )}
          </div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
              <h3
                style={{
                  margin: 0,
                  fontSize: '16px',
                  fontWeight: '700',
                  color: '#111827',
                }}
              >
                {recipient.firstName}
              </h3>
              <div
                style={{
                  width: '8px',
                  height: '8px',
                  borderRadius: '50%',
                  backgroundColor: '#16a34a',
                }}
              />
            </div>
            <p
              style={{
                margin: '2px 0 0',
                fontSize: '13px',
                fontWeight: '400',
                color: '#6b7280',
              }}
            >
              {recipient.location}
            </p>
          </div>
        </div>
        <button
          onClick={() => onMenuClick && onMenuClick(recipient.id)}
          style={{ background: 'transparent', border: 'none', padding: '4px' }}
        >
          <IonIcon
            icon={ellipsisVertical}
            style={{ fontSize: '20px', color: '#6b7280' }}
          />
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {recipient.statuses.map((status, idx) => (
          <div
            key={idx}
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              backgroundColor: '#fafafa',
              borderRadius: '12px',
              padding: '12px',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
              <IonIcon
                icon={getIconForService(status.serviceType)}
                style={{
                  fontSize: '18px',
                  color: getColorForService(status.serviceType),
                }}
              />
              <div>
                <div
                  style={{
                    fontSize: '13px',
                    fontWeight: '700',
                    color: '#111827',
                  }}
                >
                  {status.label}
                </div>
                <div
                  style={{
                    fontSize: '12px',
                    fontWeight: '500',
                    color: status.isOk ? '#16a34a' : '#f59e0b',
                    marginTop: '2px',
                  }}
                >
                  {status.statusText}
                </div>
              </div>
            </div>
            <IonIcon
              icon={status.isOk ? checkmarkCircleOutline : timeOutline}
              style={{
                fontSize: '18px',
                color: status.isOk ? '#16a34a' : '#f59e0b',
              }}
            />
          </div>
        ))}
      </div>

      <button
        onClick={() => onSendSupport(recipient.id)}
        style={{
          width: '100%',
          padding: '14px',
          backgroundColor: '#6d28d9',
          color: '#ffffff',
          border: 'none',
          borderRadius: '999px',
          fontSize: '14px',
          fontWeight: '700',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '8px',
          marginTop: 'auto',
        }}
      >
        <IonIcon icon={cartOutline} style={{ fontSize: '18px' }} />
        Send Again
      </button>
    </div>
  );
};

export default RecipientCareCard;