import { sxx } from '@graphcommerce/next-ui'
import type { SxProps, Theme } from '@mui/material'
import { Box, Typography } from '@mui/material'
import { productListPrice } from '../ProductListPrice'

export type ProductListItemTitleAndPriceProps = {
  titleComponent?: React.ElementType
  title: React.ReactNode
  subTitle?: React.ReactNode
  children: React.ReactNode
  classes: { titleContainer: string; title: string; subtitle: string }
  sx?: SxProps<Theme>
}

export function ProductListItemTitleAndPrice(props: ProductListItemTitleAndPriceProps) {
  const { titleComponent = 'h2', classes, children, subTitle, title, sx } = props

  return (
    <Box
      className={classes.titleContainer}
      sx={sxx(
        (theme) => ({
          display: 'grid',
          alignItems: 'baseline',
          marginTop: theme.spacings.xs,
          columnGap: 1,
          gridTemplateAreas: {
            xs: '"title title" "subtitle price"',
            md: '"title subtitle price"',
          },
          gridTemplateColumns: { xs: 'unset', md: 'auto auto 1fr' },
          justifyContent: 'space-between',
        }),
        sx,
      )}
    >
      <Typography
        component={titleComponent}
        variant='subtitle1'
        sx={{
          display: 'inline',
          color: 'text.primary',
          overflowWrap: 'break-word',
          maxWidth: '100%',
          gridArea: 'title',
        }}
        className={classes.title}
      >
        {title}
      </Typography>

      {subTitle && (
        <Box sx={{ gridArea: 'subtitle' }} className={classes.subtitle}>
          {subTitle}
        </Box>
      )}

      <Typography
        component='div'
        variant='body1'
        className={productListPrice.classes.root}
        sx={{ gridArea: 'price', textAlign: 'right', justifySelf: { sm: 'flex-end' } }}
      >
        {children}
      </Typography>
    </Box>
  )
}