'use client'

// React Imports
import { useTranslations } from 'next-intl'

// MUI Imports
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'

// Component Imports
import CustomAvatar from '@core/components/mui/Avatar'
import OptionMenu from '@core/components/option-menu'

interface HarvestPredictionCardProps {
  data?: Record<string, unknown>
}

const HarvestPredictionCard = ({ data }: HarvestPredictionCardProps) => {
  const t = useTranslations('farmDashboard')
  const harvestDate = (data?.dateFormatted as string) ?? ''
  const daysUntil = (data?.daysUntil as number | undefined) ?? 0
  const daysLeftFormatted = daysUntil > 0 ? `${daysUntil} ${t('labels.days')}` : ''
  const description = (data?.description as string) ?? ''

  return (
    <Card>
      <CardHeader
        avatar={
          <CustomAvatar skin='light' color='success' size={44}>
            <i className='tabler-calendar-event text-2xl' />
          </CustomAvatar>
        }
        title={t('cards.harvestPredictionCard')}
        subheader={t('subheaders.aiEstimatedDate')}
        action={<OptionMenu options={[t('optionMenu.details'), t('optionMenu.adjust'), t('optionMenu.export')]} />}
      />
      <CardContent className='flex flex-col gap-4'>
        <div className='flex items-center gap-4'>
          <Typography variant='h3'>{harvestDate}</Typography>
          {daysLeftFormatted && (
            <Chip label={daysLeftFormatted} color='info' size='small' variant='tonal' />
          )}
        </div>
        {description && (
          <Typography variant='body2' color='text.secondary'>
            {description}
          </Typography>
        )}
      </CardContent>
    </Card>
  )
}

export default HarvestPredictionCard
