'use client';

import React from 'react';
import { DollarSign } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';

interface SponsorshipSlot {
  id: string;
  name: string;
  description: string;
  price: number;
  currency: string;
  isAvailable: boolean;
  sponsoredBy?: {
    name: string;
  };
}

interface SponsorshipSlotCardProps {
  slot: SponsorshipSlot;
}

export function SponsorshipSlotCard({ slot }: SponsorshipSlotCardProps) {
  return (
    <Surface
      variant="muted"
      rounded="lg"
      border
      padding={4}
      // eslint-disable-next-line gridpilot-rules/component-classification
      style={{ 
        backgroundColor: slot.isAvailable ? 'rgba(16, 185, 129, 0.05)' : 'rgba(38, 38, 38, 0.3)',
        borderColor: slot.isAvailable ? '#10b981' : '#262626'
      }}
    >
      <Stack gap={3}>
        <Stack direction="row" align="start" justify="between">
          <Heading level={4}>{slot.name}</Heading>
          <Badge variant={slot.isAvailable ? 'success' : 'default'}>
            {slot.isAvailable ? 'Available' : 'Taken'}
          </Badge>
        </Stack>

        <Text size="sm" color="text-gray-300" block>{slot.description}</Text>

        <Stack direction="row" align="center" gap={2}>
          <Icon icon={DollarSign} size={4} color="#9ca3af" />
          <Text weight="semibold" color="text-white">
            {slot.price} {slot.currency}
          </Text>
        </Stack>

        {!slot.isAvailable && slot.sponsoredBy && (
          // eslint-disable-next-line gridpilot-rules/component-classification
          <Box pt={3} style={{ borderTop: '1px solid #262626' }}>
            <Text size="xs" color="text-gray-400" block mb={1}>Sponsored by</Text>
            <Text size="sm" weight="medium" color="text-white">{slot.sponsoredBy.name}</Text>
          </Box>
        )}
      </Stack>
    </Surface>
  );
}