import { ChevronRight } from "lucide-react";
import { Group, Skeleton, Stack, Text } from "@mantine/core";
import { memo } from "react";
import { Link } from "react-router-dom";
import { cv } from "../constants";
import { ActivityRow } from "./ActivityRow";
import { Card } from "./Card";
import { EmptyState } from "./EmptyState";

interface RecentActivitySectionProps {
  bookings: any[];
  isLoading: boolean;
  onBookingClick: (id: string) => void;
}

export const RecentActivitySection = memo(function RecentActivitySection({
  bookings,
  isLoading,
  onBookingClick,
}: RecentActivitySectionProps) {
  return (
    <Card className="h-full" padding={24}>
      <Group justify="space-between" align="center" mb={16}>
        <Text fz={17} fw={700} c="edr-text">
          Recent Activity
        </Text>
        <Link to="/bookings">
          <Group gap={3} align="center" className="no-underline">
            <Text fz={13} fw={600} c="edr-green.7">
              View all
            </Text>
            <ChevronRight size={15} color={cv("edr-green.7")} />
          </Group>
        </Link>
      </Group>

      {isLoading ? (
        <Stack gap={10}>
          {[1, 2, 3, 4, 5].map((i) => (
            <Skeleton key={i} height={44} radius="md" />
          ))}
        </Stack>
      ) : bookings.length === 0 ? (
        <EmptyState message="No recent activity." />
      ) : (
        <Stack gap={2}>
          {bookings.slice(0, 6).map((booking) => (
            <ActivityRow
              key={booking.id}
              booking={booking}
              onClick={() => onBookingClick(booking.id)}
            />
          ))}
        </Stack>
      )}
    </Card>
  );
});
