import * as React from 'react'
import {
  Box,
  VStack,
  Heading,
  Text,
  AspectRatio,
  useColorModeValue,
} from '@chakra-ui/react'
import Image from 'src/components/Image'
import { useLayout } from 'src/hooks/use-layout'
import Squircle from '@scotato/react-squircle'

interface RecipeIngredientProps {
  title?: string
  subtitle?: string
  image?: string
  children?: JSX.Element
}

const RecipeCard = (props: RecipeIngredientProps) => {
  const color = useColorModeValue('gray.600', 'gray.400')
  const { isLargeLayout } = useLayout()
  const { title, subtitle, image } = props

  return (
    <Box>
      {image ? (
        <Box px={isLargeLayout ? 12 : 6} my={8}>
          <Squircle p1={10} p2={64}>
            <AspectRatio ratio={2}>
              <Image src={image} />
            </AspectRatio>
          </Squircle>
        </Box>
      ) : null}

      <VStack px={isLargeLayout ? 12 : 6} my={2} spacing={2} alignItems="start">
        <Heading fontWeight="bold" children={title} />
        {subtitle ? (
          <Text color={color} fontSize={20} children={subtitle} />
        ) : null}
        {props.children}
      </VStack>
    </Box>
  )
}

export default RecipeCard
