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

export interface DateHeaderProps {
  date: string;
  showIcon?: boolean;
}

export const DateHeader = ({ 
  date, 
  showIcon = true 
}: DateHeaderProps) => {
  return (
    <Stack direction="row" align="center" gap={3} paddingX={2}>
      {showIcon && (
        <Box padding={2} bg="rgba(25, 140, 255, 0.1)" rounded="lg">
          <Icon icon={Calendar} size={4} intent="primary" />
        </Box>
      )}
      <Box>
        <Text weight="semibold" size="sm" variant="high">
          {date}
        </Text>
      </Box>
    </Stack>
  );
};