"use client"

import Link from "next/link"
import { motion } from "framer-motion"
import {
    PlusCircle,
    Package,
    BarChart3,
    Settings,
    MessageSquare,
    Truck,
    Tag,
    Users
} from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"

const actions = [
    {
        title: "Add Product",
        icon: PlusCircle,
        href: "/dashboard/products/new",
        color: "bg-blue-500/10 text-blue-500",
        description: "Create a new listing"
    },
    {
        title: "Process Orders",
        icon: Truck,
        href: "/dashboard/orders?status=paid",
        color: "bg-emerald-500/10 text-emerald-500",
        description: "Ship pending orders"
    },
    {
        title: "Analytics",
        icon: BarChart3,
        href: "/dashboard/analytics",
        color: "bg-purple-500/10 text-purple-500",
        description: "View sales performance"
    },
    {
        title: "Messages",
        icon: MessageSquare,
        href: "/dashboard/chats",
        color: "bg-amber-500/10 text-amber-500",
        description: "Chat with customers"
    }
]

export default function QuickActions() {
    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {actions.map((action, index) => (
                <motion.div
                    key={action.title}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                >
                    <Link href={action.href}>
                        <Card className="hover:border-primary/50 transition-colors cursor-pointer group h-full">
                            <CardContent className="p-6 flex flex-col items-center text-center">
                                <div className={`p-3 rounded-xl ${action.color} mb-4 group-hover:scale-110 transition-transform`}>
                                    <action.icon className="h-6 w-6" />
                                </div>
                                <h3 className="font-semibold text-lg">{action.title}</h3>
                                <p className="text-sm text-muted-foreground mt-1">{action.description}</p>
                            </CardContent>
                        </Card>
                    </Link>
                </motion.div>
            ))}
        </div>
    )
}