pomodoro/client/src/components/molecules/SuggestionChips.tsx

import { useQuery } from "@tanstack/react-query";
import { Lightbulb, ArrowRight } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/atoms/Button";
import { useStore } from "@/lib/store";

interface Suggestion {
  minutes: number;
  reason: string;
}

interface SuggestionChipsProps {
  onSuggestionSelect: (minutes: number) => void;
  className?: string;
}

export function SuggestionChips({ onSuggestionSelect, className = "" }: SuggestionChipsProps) {
  const deviceId = useStore((state) => state.deviceId);

  const { data: suggestions, isLoading } = useQuery<{ suggestions: Suggestion[] }>({
    queryKey: ['/api/suggestions', { deviceId }],
    enabled: !!deviceId,
  });

  if (isLoading) {
    return (
      <Card className={className}>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Lightbulb className="text-accent mr-3" />
            Smart Suggestions
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="p-4 border border-border rounded-lg animate-pulse">
                <div className="h-4 bg-muted rounded mb-2"></div>
                <div className="h-3 bg-muted rounded w-3/4"></div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  const suggestionList = suggestions?.suggestions || [
    { minutes: 25, reason: "Classic Pomodoro technique - great for starting out." },
    { minutes: 15, reason: "Short sprints help build focus habits." },
    { minutes: 40, reason: "Extended sessions for deep work." }
  ];

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="flex items-center">
          <Lightbulb className="text-accent mr-3" />
          Smart Suggestions
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {suggestionList.map((suggestion, index) => (
            <Button
              key={index}
              variant="outline"
              className="p-4 h-auto text-left group hover:border-primary hover:bg-primary/5 transition-all"
              onClick={() => onSuggestionSelect(suggestion.minutes)}
              data-testid={`button-suggestion-${suggestion.minutes}`}
            >
              <div className="w-full">
                <div className="flex items-center justify-between mb-2">
                  <span className="font-medium group-hover:text-primary transition-colors">
                    {suggestion.minutes} min {suggestion.minutes >= 30 ? 'Deep Work' : suggestion.minutes <= 15 ? 'Sprint' : 'Focus'}
                  </span>
                  <ArrowRight className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors" />
                </div>
                <p className="text-sm text-muted-foreground">
                  {suggestion.reason}
                </p>
              </div>
            </Button>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}