import { MessageCircle } from "lucide-react";
import { motion } from "motion/react";

interface FeedEmptyStateProps {
  accentColor: string;
  onStartMission: () => void;
}

export function FeedEmptyState({ accentColor, onStartMission }: FeedEmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center px-4 py-16 mt-32">
      <div
        className="w-24 h-24 rounded-full flex items-center justify-center mb-4"
        style={{
          background:
            "linear-gradient(135deg, rgba(138, 206, 224, 0.15) 0%, rgba(62, 121, 131, 0.15) 100%)",
          border: "2px solid rgba(138, 206, 224, 0.3)",
        }}
      >
        <MessageCircle className="w-12 h-12" style={{ color: accentColor }} />
      </div>
      <h3 className="text-white text-lg font-bold mb-2">هنوز پستی وجود ندارد</h3>
      <p className="text-gray-400 text-sm text-center mb-6">
        اولین نفری باش که ماموریتشو به اشتراک میذاره!
      </p>
      <motion.button
        whileTap={{ scale: 0.95 }}
        onClick={onStartMission}
        className="px-6 py-3 rounded-full font-bold text-white"
        style={{
          background: "linear-gradient(135deg, #FFB800 0%, #FF9500 100%)",
          boxShadow: "0 4px 16px rgba(255, 165, 0, 0.4)",
        }}
      >
        شروع ماموریت جدید
      </motion.button>
    </div>
  );
}
