import React from 'react';
import { Box, BoxProps } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { LucideIcon, Clock } from 'lucide-react';

export interface Activity {
  id: string;
  type: 'sponsorship_approved' | 'payment_received' | 'new_opportunity' | 'contract_expiring';
  title: string;
  description: string;
  timestamp: string;
  icon: LucideIcon;
  color: string;
}

interface SponsorActivityPanelProps {
  activities: Activity[];
}

/**
 * SponsorActivityPanel
 * 
 * A semantic component for displaying a feed of sponsor activities.
 * Dense, chronological list.
 */
export function SponsorActivityPanel({ activities }: SponsorActivityPanelProps) {
  return (
    <Box>
      <Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
        Recent Activity
      </Heading>
      <Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
        {activities.length === 0 ? (
          <Box p={8} textAlign="center">
            <Icon icon={Clock} size={8} color="text-gray-600" className="mx-auto mb-3" />
            <Text color="text-gray-500">No recent activity to show.</Text>
          </Box>
        ) : (
          <Box>
            {activities.map((activity, index) => (
              <Box 
                key={activity.id} 
                p={4} 
                display="flex" 
                gap={4}
                borderBottom={index !== activities.length - 1}
                borderColor="border-charcoal-outline/30"
                hoverBg="bg-iron-gray/20"
                transition-colors
              >
                <Box 
                  w="10" 
                  h="10" 
                  rounded="lg" 
                  display="flex" 
                  alignItems="center" 
                  justifyContent="center"
                  bg={activity.color.replace('text-', 'bg-').concat('/10') as BoxProps<'div'>['bg']}
                >
                  <Icon icon={activity.icon} size={5} color={activity.color as any} />
                </Box>
                <Box flexGrow={1}>
                  <Box display="flex" alignItems="center" justifyContent="between" mb={0.5}>
                    <Text weight="medium" color="text-white">{activity.title}</Text>
                    <Text size="xs" color="text-gray-500">{activity.timestamp}</Text>
                  </Box>
                  <Text size="sm" color="text-gray-400">{activity.description}</Text>
                </Box>
              </Box>
            ))}
          </Box>
        )}
      </Box>
    </Box>
  );
}
