import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Wind, Droplets, Bot, FileText, Zap } from "lucide-react";
import { useLocation } from "wouter";

const quickActions = [
  {
    icon: <Wind className="text-2xl" />,
    label: "Quick AQI",
    route: "/aryabhata-analyzer",
    hoverColor: "hover:bg-saffron hover:text-white"
  },
  {
    icon: <Droplets className="text-2xl" />,
    label: "Water Test",
    route: "/bhagirathi-jalcheck", 
    hoverColor: "hover:bg-deep-green hover:text-white"
  },
  {
    icon: <Bot className="text-2xl" />,
    label: "Ask Rishi",
    route: "/rishi-ai",
    hoverColor: "hover:bg-navy-blue hover:text-white"
  },
  {
    icon: <FileText className="text-2xl" />,
    label: "Generate Report",
    route: "/kautilya-report",
    hoverColor: "hover:bg-warm-orange hover:text-white"
  }
];

export default function QuickActions() {
  const [, setLocation] = useLocation();

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center text-deep-charcoal">
          <Zap className="text-saffron mr-2" />
          Quick Actions
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {quickActions.map((action, index) => (
            <Button
              key={index}
              variant="ghost"
              className={`flex flex-col items-center p-4 bg-light-cream rounded-lg transition-all duration-200 ${action.hoverColor}`}
              onClick={() => setLocation(action.route)}
            >
              {action.icon}
              <span className="text-sm font-medium mt-2">{action.label}</span>
            </Button>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}