Activity Feed

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Timeline,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineTime,
  TimelineTitle,
} from "@cooud-ui/ui";
import { CreditCard, FolderPlus, MessageSquare, TriangleAlert, UserPlus } from "lucide-react";

export function ActivityFeedBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-md gap-4 shadow-lg">
        <CardHeader>
          <CardTitle className="text-base">Recent activity</CardTitle>
        </CardHeader>

        <CardContent>
          <Timeline>
            <TimelineItem>
              <TimelineDot tone="primary" icon={<FolderPlus />} />
              <TimelineContent>
                <TimelineTitle>Mara created the project Atlas</TimelineTitle>
                <TimelineTime>2 minutes ago</TimelineTime>
                <TimelineDescription>
                  A new workspace was set up for the design team.
                </TimelineDescription>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineDot tone="default" icon={<UserPlus />} />
              <TimelineContent>
                <TimelineTitle>Devon invited 3 teammates</TimelineTitle>
                <TimelineTime>26 minutes ago</TimelineTime>
                <TimelineDescription>
                  Invitations were sent to riley, jordan and sasha.
                </TimelineDescription>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineDot tone="success" icon={<CreditCard />} />
              <TimelineContent>
                <TimelineTitle>Invoice INV-2026-006 was paid</TimelineTitle>
                <TimelineTime>1 hour ago</TimelineTime>
                <TimelineDescription>R$ 2.480,00 settled to your balance.</TimelineDescription>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineDot tone="default" icon={<MessageSquare />} />
              <TimelineContent>
                <TimelineTitle>Riley left feedback on the Q3 plan</TimelineTitle>
                <TimelineTime>4 hours ago</TimelineTime>
                <TimelineDescription>
                  Three comments were added to the roadmap doc.
                </TimelineDescription>
              </TimelineContent>
            </TimelineItem>

            <TimelineItem>
              <TimelineDot tone="warning" icon={<TriangleAlert />} />
              <TimelineContent>
                <TimelineTitle>Storage is reaching its limit</TimelineTitle>
                <TimelineTime>Yesterday</TimelineTime>
                <TimelineDescription>
                  The team is using 92% of the available quota.
                </TimelineDescription>
              </TimelineContent>
            </TimelineItem>
          </Timeline>
        </CardContent>
      </Card>
    </div>
  );
}