'use client'

// 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'

const HarvestPredictionCard = () => {
  return (
    <Card>
      <CardHeader
        avatar={
          <CustomAvatar skin='light' color='success' size={44}>
            <i className='tabler-calendar-event text-2xl' />
          </CustomAvatar>
        }
        title='Harvest Prediction'
        subheader='AI Estimated Date'
        action={<OptionMenu options={['Details', 'Adjust', 'Export']} />}
      />
      <CardContent className='flex flex-col gap-4'>
        <div className='flex items-center gap-4'>
          <Typography variant='h3'>Oct 15, 2025</Typography>
          <Chip label='58 days' color='info' size='small' variant='tonal' />
        </div>
        <Typography variant='body2' color='text.secondary'>
          Based on current GDD accumulation and weather forecast. Optimal harvest window: Oct 12-18.
        </Typography>
      </CardContent>
    </Card>
  )
}

export default HarvestPredictionCard