import { Box, Chip, Typography } from '@mui/material'

interface DashboardHeaderProps {
  orgName?: string
  lastUpdated?: string
}

function formatLastUpdated(iso: string): string {
  try {
    return new Intl.DateTimeFormat('de-CH', {
      dateStyle: 'short',
      timeStyle: 'short',
    }).format(new Date(iso))
  } catch {
    return iso
  }
}

export function DashboardHeader({ orgName = 'Demo Organisation', lastUpdated }: DashboardHeaderProps) {
  return (
    <Box>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
        <Typography variant="h6" sx={{ fontWeight: 600 }}>
          {orgName}
        </Typography>
        <Chip label="Demo" size="small" color="info" variant="outlined" />
      </Box>
      {lastUpdated && (
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          Zuletzt aktualisiert: {formatLastUpdated(lastUpdated)}
        </Typography>
      )}
    </Box>
  )
}