import { LucideIcon } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';

export interface NotificationStatProps {
  label: string;
  value: string | number;
  intent?: 'primary' | 'success' | 'critical' | 'low';
}

export const NotificationStat = ({ label, value, intent = 'low' }: NotificationStatProps) => (
  <Box bg="var(--ui-color-bg-base)" padding={4} style={{ border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-sm)' }}>
    <Text size="xs" variant="low" weight="bold" uppercase block>{label}</Text>
    <Text size="2xl" weight="bold" variant={intent} block>{value}</Text>
  </Box>
);

export interface NotificationDeadlineProps {
  label: string;
  deadline: string;
  icon: LucideIcon;
}

export const NotificationDeadline = ({ label, deadline, icon }: NotificationDeadlineProps) => (
  <Box marginTop={6} display="flex" alignItems="center" gap={3} paddingX={4} paddingY={3} bg="rgba(255, 190, 77, 0.05)" style={{ border: '1px solid rgba(255, 190, 77, 0.2)', borderRadius: 'var(--ui-radius-sm)' }}>
    <Icon icon={icon} size={5} intent="warning" />
    <Box>
      <Text size="sm" weight="bold" variant="warning" block uppercase>{label}</Text>
      <Text size="xs" variant="low" block>{deadline}</Text>
    </Box>
  </Box>
);