import React, { memo, useMemo } from 'react';
import styled from 'styled-components';
import { Lead } from '../../types/lead';
import { formatDate } from '../../utils/dateUtils';

interface LeadCardProps {
  lead: Lead;
  'aria-label'?: string;
}

const Card = styled.article`
  background: var(--card-bg, white);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 16px;
  transition: transform 0.2s ease-in-out;
  border: 1px solid var(--border-color, #e1e1e1);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }

  &:focus-within {
    outline: 2px solid var(--focus-color, #0066cc);
    outline-offset: 2px;
  }
`;

const LeadName = styled.h3`
  margin: 0 0 8px 0;
  color: var(--text-primary, #2c3e50);
  font-size: 1.2rem;
`;

const LeadInfo = styled.p`
  margin: 4px 0;
  color: var(--text-secondary, #7f8c8d);
  font-size: 0.9rem;
  line-height: 1.4;
`;

const StatusBadge = styled.span<{ status: Lead['status'] }>`
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  background-color: ${({ status }) => {
    switch (status) {
      case 'new': return 'var(--status-new, #e3f2fd)';
      case 'contacted': return 'var(--status-contacted, #fff3e0)';
      case 'qualified': return 'var(--status-qualified, #e8f5e9)';
      case 'lost': return 'var(--status-lost, #ffebee)';
      default: return 'var(--status-default, #f5f5f5)';
    }
  }};
  color: ${({ status }) => {
    switch (status) {
      case 'new': return 'var(--status-new-text, #1976d2)';
      case 'contacted': return 'var(--status-contacted-text, #f57c00)';
      case 'qualified': return 'var(--status-qualified-text, #388e3c)';
      case 'lost': return 'var(--status-lost-text, #d32f2f)';
      default: return 'var(--status-default-text, #757575)';
    }
  }};
`;

const LeadCard: React.FC<LeadCardProps> = memo(({ lead, 'aria-label': ariaLabel }) => {
  const formattedDate = useMemo(() => 
    formatDate(lead.updatedAt),
    [lead.updatedAt]
  );

  return (
    <Card role="article" aria-label={ariaLabel}>
      <LeadName>{lead.name}</LeadName>
      <LeadInfo>
        <a href={`mailto:${lead.email}`} aria-label={`Email ${lead.name}`}>
          {lead.email}
        </a>
      </LeadInfo>
      <LeadInfo>
        <a href={`tel:${lead.phone}`} aria-label={`Call ${lead.name}`}>
          {lead.phone}
        </a>
      </LeadInfo>
      <LeadInfo>
        <StatusBadge status={lead.status}>
          {lead.status.charAt(0).toUpperCase() + lead.status.slice(1)}
        </StatusBadge>
      </LeadInfo>
      <LeadInfo>Last updated: {formattedDate}</LeadInfo>
    </Card>
  );
});

LeadCard.displayName = 'LeadCard';

export default LeadCard;