import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Clock, LucideIcon } 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 (
    <Stack>
      <Heading level={3} fontSize="lg" weight="semibold" mb={4} color="text-white">
        Recent Activity
      </Heading>
      <Stack border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
        {activities.length === 0 ? (
          <Stack p={8} align="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>
          </Stack>
        ) : (
          <Stack>
            {activities.map((activity, index) => (
              <Stack 
                key={activity.id} 
                p={4} 
                direction="row"
                gap={4}
                borderBottom={index !== activities.length - 1}
                borderColor="border-charcoal-outline/30"
                className="transition-colors hover:bg-bg-iron-gray/20"
              >
                <Stack 
                  w="10" 
                  h="10" 
                  rounded="lg" 
                  align="center" 
                  justify="center"
                  bg={activity.color.replace('text-', 'bg-').concat('/10')}
                >
                  <Icon icon={activity.icon} size={5} color={activity.color as any} />
                </Stack>
                <Stack flexGrow={1}>
                  <Stack direction="row" align="center" justify="between" mb={0.5}>
                    <Text weight="medium" color="text-white">{activity.title}</Text>
                    <Text size="xs" color="text-gray-500">{activity.timestamp}</Text>
                  </Stack>
                  <Text size="sm" color="text-gray-400">{activity.description}</Text>
                </Stack>
              </Stack>
            ))}
          </Stack>
        )}
      </Stack>
    </Stack>
  );
}