import React, { CSSProperties, useContext, useMemo } from "react"

import { ProductContext } from "../contexts/ProductContext"

import { ProductContextProps } from "../interfaces/Product"
import styles from '../styles/styles.module.css'

export interface TitleProps {
  title?: string;
  className?: string;
  style?: CSSProperties;
}

const Title = ({ title, className, style } : TitleProps) => {
  const { product }: ProductContextProps = useContext(ProductContext)

  const display = useMemo(() => title ?? product.title, [title, product])
  return (
    <span
      className={`${styles.productDescription} ${className??''}`}
      style={style ?? {}}
    >
      { display }
    </span>
  )
}

export default Title