import { Card, Tag, Typography } from 'antd';
import { TrophyOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { Text, Paragraph } = Typography;

interface ImpactStoryCardProps {
  story: {
    id: string;
    title: string;
    body: string;
    type: 'MILESTONE' | 'VICTORY' | 'RESPONSE' | 'CUSTOM';
    campaignTitle?: string;
    milestoneValue?: number | null;
    milestoneMetric?: string | null;
    publishedAt?: string | null;
  };
}

const typeLabels: Record<string, string> = {
  MILESTONE: 'Milestone',
  VICTORY: 'Victory',
  RESPONSE: 'Response',
  CUSTOM: 'Story',
};

export default function ImpactStoryCard({ story }: ImpactStoryCardProps) {
  const isMilestone = story.type === 'MILESTONE';

  return (
    <Card
      size="small"
      style={{
        borderColor: isMilestone ? '#d4a017' : undefined,
        borderWidth: isMilestone ? 2 : 1,
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
        <div>
          {story.campaignTitle && (
            <Tag color="blue" style={{ marginBottom: 4 }}>{story.campaignTitle}</Tag>
          )}
          <Tag color={isMilestone ? 'gold' : story.type === 'VICTORY' ? 'green' : 'default'}>
            {isMilestone && <TrophyOutlined style={{ marginRight: 4 }} />}
            {typeLabels[story.type]}
          </Tag>
        </div>
        {story.milestoneValue && (
          <Tag color="gold" style={{ fontWeight: 'bold', fontSize: 14 }}>
            {story.milestoneValue.toLocaleString()}
          </Tag>
        )}
      </div>

      <Text strong style={{ fontSize: 15, display: 'block', marginBottom: 4 }}>
        {story.title}
      </Text>

      <Paragraph
        type="secondary"
        ellipsis={{ rows: 3 }}
        style={{ marginBottom: 4 }}
      >
        {story.body}
      </Paragraph>

      {story.publishedAt && (
        <Text type="secondary" style={{ fontSize: 12 }}>
          {dayjs(story.publishedAt).format('MMM D, YYYY')}
        </Text>
      )}
    </Card>
  );
}
