'use client'

// MUI Imports
import Grid from '@mui/material/Grid2'

// Component Imports
import CardStatsVertical from '@components/card-statistics/Vertical'

type KpiItem = {
  id: string
  title: string
  subtitle: string
  stats: string
  avatarColor?: string
  avatarIcon?: string
  chipText?: string
  chipColor?: string
}

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

const FarmOverviewKPIs = ({ data }: FarmOverviewKPIsProps) => {
  const kpis = (data?.kpis as KpiItem[] | undefined) ?? []
  if (kpis.length === 0) return null

  return (
    <>
      {kpis.map((kpi) => (
        <Grid key={kpi.id} size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
          <CardStatsVertical
            title={kpi.title}
            subtitle={kpi.subtitle}
            stats={kpi.stats}
            avatarColor={(kpi.avatarColor as 'success' | 'info' | 'primary' | 'secondary' | 'warning') ?? 'primary'}
            avatarIcon={kpi.avatarIcon ?? 'tabler-chart-bar'}
            avatarSkin='light'
            avatarSize={44}
            chipText={kpi.chipText}
            chipColor={(kpi.chipColor as 'success' | 'warning') ?? 'success'}
            chipVariant='tonal'
          />
        </Grid>
      ))}
    </>
  )
}

export default FarmOverviewKPIs