import React, { FC } from 'react'
import { useProduct } from 'vtex.product-context'
import styles from "./styles.css";

export const DescriptionSection: FC = () => {

  const productContextValue = useProduct();

  const imageProduct = productContextValue?.product?.items[0].images[0].imageUrl;
  const imageProductAlt = productContextValue?.product?.productName;
  const descriptionProduct = productContextValue?.product?.description;

  return (
      <div className={styles.wrapperImageAndDescription}>
        <div className={styles.containerImageProductDescriptionSection}>
          <img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
        </div>
        <div className={styles.wrapperDescriptionSection}>
          <h3 className={styles.descriptionSectionTitle}>Descrição do produto</h3>
          <p className={styles.descriptionSectionParagraph}>{descriptionProduct}</p>
        </div>
      </div>
  );
}