import { Grid } from 'antd';
import styles from './productionCard.less';
import classnames from 'classnames';
const { useBreakpoint } = Grid;
interface ProductionCardProps {
  index: number;
  title?: string;
  content: string;
  onChange: (content: string) => void;
}

const ProductionCard = (props: ProductionCardProps) => {
  const { title, content, onChange } = props;
  const screens = useBreakpoint();
  const isMobile = screens.xs;

  const handleClick = () => {
    onChange && onChange(content);
  };

  return (
    <div className={classnames(`${styles.CardWrapper} ${isMobile && styles.CardWrapperMobile}`)}>
      <div className={styles.title}>{title}</div>
      <div className={styles.CardContent}>
        <div className={styles.content}>{content}</div>
        <div className={styles.button} onClick={handleClick}>
          试一下看看
        </div>
      </div>
    </div>
  );
};

export default ProductionCard;
