Analytics 4

import { Gift, Globe, Mail, Megaphone, MoreVertical, Search, Share2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Progress } from "@/components/ui/progress";

export const Analytics4 = () => {
    const ranges = ["This Month", "Last Month", "This Quarter"];

    const campaigns = [
        {
            id: "1",
            name: "Search Ads",
            category: "Paid Acquisition",
            progress: 85,
            icon: Search,
        },
        {
            id: "2",
            name: "Social Media",
            category: "Brand Growth",
            progress: 74,
            icon: Share2,
        },
        {
            id: "3",
            name: "Email Campaigns",
            category: "User Retention",
            progress: 92,
            icon: Mail,
        },
        {
            id: "4",
            name: "Referral Program",
            category: "Viral Loops",
            progress: 41,
            icon: Gift,
        },
        {
            id: "5",
            name: "SEO Optimization",
            category: "Organic Traffic",
            progress: 58,
            icon: Globe,
        },
        {
            id: "6",
            name: "Influencer Outreach",
            category: "Partner Marketing",
            progress: 63,
            icon: Megaphone,
        },
    ];

    return (
        <Card>
            <CardHeader>
                <CardTitle>Campaign Goals</CardTitle>
                <CardDescription>Average 70% completed</CardDescription>
                <CardAction>
                    <DropdownMenu>
                        <DropdownMenuTrigger
                            render={
                                <Button variant="ghost" size="icon-xs" className="cursor-pointer">
                                    <MoreVertical className="size-4" />
                                </Button>
                            }></DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-40">
                            {ranges.map((item) => (
                                <DropdownMenuItem key={item} className="cursor-pointer text-sm">
                                    {item}
                                </DropdownMenuItem>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>
                </CardAction>
            </CardHeader>
            <CardContent className="grid gap-2.5">
                {campaigns.map((item) => {
                    const IconComponent = item.icon;
                    return (
                        <div key={item.id} className="flex items-center gap-3">
                            <div className="bg-muted flex size-9 shrink-0 items-center justify-center rounded-md">
                                <IconComponent className="size-4.5" />
                            </div>
                            <div>
                                <p className="font-medium">{item.name}</p>
                                <p className="text-muted-foreground -mt-px truncate text-sm">{item.category}</p>
                            </div>
                            <div className="flex flex-1 items-center justify-end gap-3">
                                <Progress value={item.progress} className="h-1.5 w-full max-w-28" />
                                <span className="w-10 shrink-0 text-end text-sm font-medium">{item.progress}%</span>
                            </div>
                        </div>
                    );
                })}
            </CardContent>
        </Card>
    );
};