import { Ingredient } from '@/types/services/productRecipe'
import { formatCurrency } from '@/utils/transform'
import { Card, CardHeader, Chip, Typography } from '@mui/material'

interface Props {
  data: Ingredient | undefined
}

const IngredientDetailInfo = ({ data }: Props) => {
  return (
    <Card>
      <CardHeader
        title={
          <div className='flex items-center gap-3'>
            <Typography variant='h4' component='h1' className='font-bold'>
              {data?.name ?? '-'}
            </Typography>
            <Chip label={'Active'} color={'success'} size='small' />
          </div>
        }
        subheader={
          <div className='flex flex-col gap-1 mt-2'>
            <div className='flex gap-4'>
              <Typography variant='body2'>
                <span className='font-semibold'>Cost:</span> {formatCurrency(data?.cost ?? 0)}
              </Typography>
            </div>
          </div>
        }
      />
    </Card>
  )
}

export default IngredientDetailInfo
