import { Row, Col } from 'antd';
import type { FC } from 'react';
import styles from './content.less';
import ProductionCard from './productionCard';
import { IPromptWord } from '@/services/chatGLM/api';

interface ChatFirstContentProps {
  list: IPromptWord[];
  onChange?: (text: string) => void;
}

const ChatFirstContent: FC<ChatFirstContentProps> = (props) => {
  const { onChange, list } = props;

  return (
    <div className={styles.CardContent}>
      <Row>
        {list.map((item, index) => {
          return (
            <Col
              lg={12}
              md={12}
              span={8}
              xs={24}
              sm={12}
              xl={8}
              xxl={8}
              key={`${item.type}-card-${index}`}
            >
              <Row justify={'start'} style={{ marginBottom: 16, minWidth: 306 }}>
                <ProductionCard
                  index={index}
                  title={item.type}
                  content={item.content}
                  onChange={() => {
                    onChange && onChange(item.content);
                  }}
                />
              </Row>
            </Col>
          );
        })}
      </Row>
    </div>
  );
};

export default ChatFirstContent;
