import { Box, Typography } from '@mui/material'
import { ViewToggle } from '../shared'

interface Props {
  total: number
  verifiedCount: number
  externalCount: number
  futureCount: number
  view?: 'list' | 'grid'
  onViewChange?: (v: 'list' | 'grid') => void
}

export function ResultFeedHeader({ total, verifiedCount, externalCount, futureCount, view = 'list', onViewChange }: Props) {
  return (
    <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <Box>
        <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
          {total} Empfehlungen
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {verifiedCount} Verifiziert · {externalCount} Extern · {futureCount} Marktsignale
        </Typography>
      </Box>
      {onViewChange && (
        <ViewToggle view={view} onChange={onViewChange} />
      )}
    </Box>
  )
}