import { Card, Typography } from 'antd';
import { TrophyOutlined, StarFilled } from '@ant-design/icons';
import type { DashboardPoints } from './types';

interface ActivityCardProps {
  points: DashboardPoints;
}

export default function ActivityCard({ points }: ActivityCardProps) {
  return (
    <Card
      styles={{
        header: { borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '12px 20px', minHeight: 'auto' },
        body: { padding: '20px', textAlign: 'center' },
      }}
      title={
        <span style={{ fontSize: 14, fontWeight: 600 }}>Activity</span>
      }
      extra={
        <Typography.Text type="warning" style={{ fontSize: 13, fontWeight: 600 }}>
          {points.total} pts
        </Typography.Text>
      }
    >
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'baseline', gap: 4, marginBottom: 4 }}>
        <TrophyOutlined style={{ fontSize: 24, color: '#faad14' }} />
        <Typography.Title level={2} style={{ margin: 0, color: '#faad14', fontWeight: 700 }}>
          {points.total}
        </Typography.Title>
      </div>
      <Typography.Text type="secondary" style={{ fontSize: 12 }}>
        points earned
      </Typography.Text>
      {points.achievementCount > 0 && (
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
          <StarFilled style={{ color: '#f5222d', marginRight: 4 }} />
          <Typography.Text style={{ fontSize: 13 }}>
            {points.achievementCount} achievement{points.achievementCount !== 1 ? 's' : ''}
          </Typography.Text>
        </div>
      )}
    </Card>
  );
}
