/**
 * Card displaying a single idea for rating.
 */

import { Card, Typography, Tag } from 'antd';

const { Text, Paragraph } = Typography;

interface IdeaCardProps {
  ideaNumber: number;
  text: string;
  queryText: string;
}

export function IdeaCard({ ideaNumber, text, queryText }: IdeaCardProps) {
  return (
    <Card
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Text strong>IDEA #{ideaNumber}</Text>
          <Tag color="blue">Query: {queryText}</Tag>
        </div>
      }
      style={{ marginBottom: 24 }}
    >
      <Paragraph style={{
        fontSize: 16,
        lineHeight: 1.8,
        margin: 0,
        padding: '8px 0'
      }}>
        "{text}"
      </Paragraph>
    </Card>
  );
}
