import { MessageCircle } from 'lucide-react';
import { motion } from 'framer-motion';
import { useFeedbackStore } from './feedbackStore';
import { Button } from '../ui';

interface FeedbackButtonProps {
  onClick: () => void;
  showCount?: boolean;
}

export function FeedbackButton({ onClick, showCount = true }: FeedbackButtonProps) {
  const feedbackItems = useFeedbackStore((state) => state.feedbackItems);
  const pendingCount = feedbackItems.filter((f) => f.status === 'pending' || f.status === 'submitted').length;

  return (
    <motion.div
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
    >
      <Button
        variant="ghost"
        size="sm"
        onClick={onClick}
        className="relative flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
      >
        <MessageCircle className="w-4 h-4" />
        <span className="text-sm">Feedback</span>
        {showCount && pendingCount > 0 && (
          <motion.span
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            className="absolute -top-1 -right-1 w-4 h-4 bg-orange-500 text-white text-[10px] rounded-full flex items-center justify-center"
          >
            {pendingCount > 9 ? '9+' : pendingCount}
          </motion.span>
        )}
      </Button>
    </motion.div>
  );
}