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

export interface RecipientListItem {
  id: string;
  firstName: string;
  lastName: string;
  relationship: string;
  location: string;
  lastActivityText?: string;
  avatarUrl: string | null;
}

interface RecipientListCardProps {
  recipient: RecipientListItem;
  onClick: (id: string) => void;
}

const RecipientListCard: React.FC<RecipientListCardProps> = ({
  recipient,
  onClick,
}) => {
  return (
    <div
      onClick={() => onClick(recipient.id)}
      style={{
        display: 'flex',
        alignItems: 'center',
        backgroundColor: '#ffffff',
        borderRadius: '24px',
        padding: '16px',
        margin: '0 20px 12px',
        gap: '14px',
        cursor: 'pointer',
      }}
    >
      <div
        style={{
          width: '52px',
          height: '52px',
          borderRadius: '16px',
          backgroundColor: 'rgba(109,40,217,0.1)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden',
          flexShrink: 0,
        }}
      >
        {recipient.avatarUrl ? (
          <img
            src={recipient.avatarUrl}
            alt={recipient.firstName}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          />
        ) : (
          <span
            style={{ fontSize: '20px', fontWeight: '700', color: '#6d28d9' }}
          >
            {recipient.firstName.charAt(0)}
          </span>
        )}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <h3
            style={{
              margin: 0,
              fontSize: '16px',
              fontWeight: '700',
              color: '#111827',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
            }}
          >
            {recipient.firstName} {recipient.lastName}
          </h3>
          <span
            style={{ fontSize: '13px', fontWeight: '600', color: '#6d28d9' }}
          >
            {recipient.relationship}
          </span>
        </div>
        <div
          style={{
            margin: '4px 0 0',
            fontSize: '13px',
            fontWeight: '400',
            color: '#6b7280',
          }}
        >
          {recipient.location}
        </div>
        {recipient.lastActivityText && (
          <div
            style={{
              marginTop: '2px',
              fontSize: '12px',
              fontWeight: '400',
              color: '#6b7280',
            }}
          >
            Last activity: {recipient.lastActivityText}
          </div>
        )}
      </div>
      <IonIcon
        icon={chevronForwardOutline}
        style={{ fontSize: '18px', color: '#9ca3af', flexShrink: 0 }}
      />
    </div>
  );
};

export default RecipientListCard;
