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

type SensorDataType = {
  title: string
  subtitle: string
  trendNumber: number
  trend?: 'positive' | 'negative'
  unit: string
}

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

const SensorValuesList = ({ data }: SensorValuesListProps) => {
  const t = useTranslations('farmDashboard')
  const sensors = (data?.sensors as SensorDataType[] | undefined) ?? []
  if (sensors.length === 0) return null

  return (
    <Card>
      <CardHeader
        title={t('cards.sensorValuesList')}
        subheader={t('subheaders.realtimeData')}
        action={<OptionMenu options={[t('optionMenu.lastHour'), t('optionMenu.last24h'), t('optionMenu.last7Days')]} />}
      />
      <CardContent className='flex flex-col gap-4'>
        {sensors.map((item, index) => (
          <div key={index} className='flex items-center gap-4'>
            <div className='flex flex-wrap justify-between items-center gap-x-4 gap-y-1 is-full'>
              <div className='flex flex-col'>
                <Typography className='font-medium' color='text.primary'>
                  {item.title}
                </Typography>
                <Typography variant='body2'>{item.subtitle}</Typography>
              </div>
              <div className='flex items-center gap-1'>
                <i
                  className={classnames(
                    item.trend === 'negative' ? 'tabler-chevron-down text-error' : 'tabler-chevron-up text-success',
                    'text-xl'
                  )}
                />
                <Typography
                  variant='h6'
                  color={`${item.trend === 'negative' ? 'error' : 'success'}.main`}
                >{`${item.trendNumber > 0 ? '+' : ''}${item.trendNumber}%`}</Typography>
              </div>
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}

export default SensorValuesList
