import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Button } from "../ui/button";
import { Zap, FileText, ShoppingCart, Package, Users, Settings } from "lucide-react";

export function QuickActionsWidget() {
  const actions = [
    { icon: FileText, label: "견적 작성", color: "bg-blue-100 text-blue-600" },
    { icon: ShoppingCart, label: "수주 등록", color: "bg-green-100 text-green-600" },
    { icon: Package, label: "생산 지시", color: "bg-purple-100 text-purple-600" },
    { icon: Users, label: "고객 관리", color: "bg-orange-100 text-orange-600" },
    { icon: FileText, label: "결재 요청", color: "bg-red-100 text-red-600" },
    { icon: Settings, label: "시스템 설정", color: "bg-gray-100 text-gray-600" },
  ];

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center space-x-3">
          <div className="w-6 h-6 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center">
            <Zap className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
          </div>
          <span>빠른 작업</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-2">
          {actions.map((action, index) => {
            const Icon = action.icon;
            return (
              <Button
                key={index}
                variant="outline"
                className="h-auto flex-col py-3 px-2"
              >
                <div className={`w-10 h-10 rounded-lg flex items-center justify-center mb-2 ${action.color}`}>
                  <Icon className="h-5 w-5" />
                </div>
                <span className="text-xs">{action.label}</span>
              </Button>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}
