Frontend/src/views/dashboards/farm/FarmAlertsTimeline.tsx

'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 { styled } from '@mui/material/styles'
import TimelineDot from '@mui/lab/TimelineDot'
import TimelineItem from '@mui/lab/TimelineItem'
import TimelineContent from '@mui/lab/TimelineContent'
import TimelineSeparator from '@mui/lab/TimelineSeparator'
import TimelineConnector from '@mui/lab/TimelineConnector'
import MuiTimeline from '@mui/lab/Timeline'
import type { TimelineProps } from '@mui/lab/Timeline'

// Styled Timeline
const Timeline = styled(MuiTimeline)<TimelineProps>({
  paddingLeft: 0,
  paddingRight: 0,
  '& .MuiTimelineItem-root': {
    width: '100%',
    '&:before': { display: 'none' }
  }
})

type AlertItem = {
  title: string
  description: string
  time: string
  color: 'primary' | 'warning' | 'error' | 'info' | 'success'
}

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

const FarmAlertsTimeline = ({ data }: FarmAlertsTimelineProps) => {
  const t = useTranslations('farmDashboard')
  const alerts = (data?.alerts as AlertItem[] | undefined) ?? []

  return (
    <Card>
      <CardHeader
        avatar={<i className='tabler-bell-ring text-xl' />}
        title={t('cards.farmAlertsTimeline')}
        titleTypographyProps={{ variant: 'h5' }}
        subheader={t('subheaders.explainableRecommendations')}
        sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
      />
      <CardContent className='flex flex-col gap-6 pbe-5'>
        <Timeline>
          {alerts.map((alert, index) => (
            <TimelineItem key={index}>
              <TimelineSeparator>
                <TimelineDot color={alert.color} />
                {index < alerts.length - 1 && <TimelineConnector />}
              </TimelineSeparator>
              <TimelineContent>
                <div className='flex flex-wrap items-center justify-between gap-x-2 mbe-2.5'>
                  <Typography className='font-medium' color='text.primary'>
                    {alert.title}
                  </Typography>
                  <Typography variant='caption'>{alert.time}</Typography>
                </div>
                <Typography variant='body2' color='text.secondary'>
                  {alert.description}
                </Typography>
              </TimelineContent>
            </TimelineItem>
          ))}
        </Timeline>
      </CardContent>
    </Card>
  )
}

export default FarmAlertsTimeline