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

// Third-party Imports
import classnames from 'classnames'

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

type RecommendationType = {
  title: string
  subtitle: string
  avatarIcon: string
  avatarColor: 'primary' | 'info' | 'success' | 'warning' | 'error'
}

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

const RecommendationsList = ({ data }: RecommendationsListProps) => {
  const t = useTranslations('farmDashboard')
  const recommendations = (data?.recommendations as RecommendationType[] | undefined) ?? []
  if (recommendations.length === 0) return null

  return (
    <Card>
      <CardHeader
        title={t('cards.recommendationsList')}
        subheader={t('subheaders.actionItems')}
        action={<OptionMenu options={[t('optionMenu.export'), t('optionMenu.snooze'), t('optionMenu.markDone')]} />}
      />
      <CardContent className='flex flex-col gap-4'>
        {recommendations.map((item, index) => (
          <div key={index} className='flex items-start gap-4'>
            <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={38}>
              <i className={classnames(item.avatarIcon, 'text-[22px]')} />
            </CustomAvatar>
            <div className='flex flex-col flex-1 min-w-0'>
              <Typography className='font-medium' color='text.primary'>
                {item.title}
              </Typography>
              <Typography variant='body2' color='text.secondary'>
                {item.subtitle}
              </Typography>
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}

export default RecommendationsList
