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

interface RenewalItemProps {
  name: string;
  renewDateLabel: string;
  priceLabel: string;
  icon: LucideIcon;
  onRenew?: () => void;
}

export function RenewalItem({
  name,
  renewDateLabel,
  priceLabel,
  icon,
  onRenew,
}: RenewalItemProps) {
  return (
    <Stack 
      direction="row" 
      align="center" 
      justify="between" 
      p={3} 
      rounded="lg" 
      bg="bg-warning-amber/10" 
      border 
      borderColor="border-warning-amber/30"
    >
      <Stack direction="row" align="center" gap={3}>
        <Icon icon={icon} size={4} color="rgb(245, 158, 11)" />
        <Box>
          <Text size="sm" color="text-white" block>{name}</Text>
          <Text size="xs" color="text-gray-400">Renews {renewDateLabel}</Text>
        </Box>
      </Stack>
      <Box textAlign="right">
        <Text size="sm" weight="semibold" color="text-white" block>{priceLabel}</Text>
        <Button 
          variant="secondary" 
          size="sm" 
          mt={1} 
          onClick={onRenew}
          style={{ minHeight: 0, padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}
        >
          Renew
        </Button>
      </Box>
    </Stack>
  );
}