import React, { ReactNode } from 'react';
import { Card } from './Card';
import { Box } from './primitives/Box';
import { Text } from './Text';
import { Heading } from './Heading';
import { Badge } from './Badge';
import { Icon } from './Icon';
import { DollarSign } from 'lucide-react';

export interface SponsorshipCardProps {
  name: string;
  description: string;
  price: string;
  isAvailable: boolean;
  sponsoredBy?: string;
}

export const SponsorshipCard = ({ 
  name, 
  description, 
  price, 
  isAvailable, 
  sponsoredBy 
}: SponsorshipCardProps) => {
  return (
    <Card 
      variant={isAvailable ? 'default' : 'dark'} 
      style={isAvailable ? { border: '1px solid var(--ui-color-intent-success)' } : {}}
    >
      <Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
        <Heading level={4}>{name}</Heading>
        <Badge variant={isAvailable ? 'success' : 'default'}>
          {isAvailable ? 'Available' : 'Taken'}
        </Badge>
      </Box>

      <Text size="sm" variant="med" block marginBottom={4}>{description}</Text>

      <Box display="flex" alignItems="center" gap={2} marginBottom={sponsoredBy ? 4 : 0}>
        <Icon icon={DollarSign} size={4} intent="low" />
        <Text weight="bold" variant="high">{price}</Text>
      </Box>

      {sponsoredBy && (
        <Box paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
          <Text size="xs" variant="low" block marginBottom={1}>Sponsored by</Text>
          <Text size="sm" weight="medium" variant="high">{sponsoredBy}</Text>
        </Box>
      )}
    </Card>
  );
};