import { Typography } from '@mui/material'

const MOCK_TODAY = new Date('2026-05-20')

function getDays(isoDate: string): number {
  const due = new Date(isoDate)
  return Math.ceil((due.getTime() - MOCK_TODAY.getTime()) / (1000 * 60 * 60 * 24))
}

function getColor(days: number): string {
  if (days <= 0) return '#dc2626'
  if (days <= 14) return '#dc2626'
  if (days <= 30) return '#ea580c'
  if (days <= 60) return '#ca8a04'
  return '#16a34a'
}

interface Props {
  dueDate: string
}

export function ReminderDaysIndicator({ dueDate }: Props) {
  const days = getDays(dueDate)
  const color = getColor(days)

  if (days <= 0) {
    return (
      <Typography variant="caption" sx={{ color: '#dc2626', fontWeight: 700, whiteSpace: 'nowrap' }}>
        Überfällig
      </Typography>
    )
  }

  return (
    <Typography variant="caption" sx={{ color, fontWeight: 600, whiteSpace: 'nowrap' }}>
      in {days} {days === 1 ? 'Tag' : 'Tagen'}
    </Typography>
  )
}
