"use client";
import React, { useState } from "react";
import {
  ClockIcon,
  ListIcon,
  PlayIcon,
  ChevronDownIcon,
  ChevronUpIcon,
  ThumbsUpIcon,
  ThumbsDownIcon,
} from "lucide-react";
import { ChatBubbleIcon } from "@radix-ui/react-icons";

interface RecipeCardProps {
  title: string;
  recommendationRate: number;
  prepTime: string;
  positiveReviewsPercentage: number;
  negativeReviewsPercentage: number;
  videoUrl: string;
}

const RecipeCard: React.FC<RecipeCardProps> = ({
  title,
  recommendationRate,
  prepTime,
  positiveReviewsPercentage,
  negativeReviewsPercentage,
  videoUrl,
}) => {
  const [showComments, setShowComments] = useState(false);

  return (
    <div className="max-w-2xl mx-auto bg-gray-100 rounded-xl overflow-hidden shadow-2xl divide-y divide-gray-300">
      {/* Header */}
      <div className="bg-gray-200 text-gray-900 py-6 px-8 relative">
        <h1 className="text-4xl font-bold mb-3">{title}</h1>
        <p className="text-sm opacity-70">
          Recommended by {recommendationRate}/10 Chefs
        </p>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 divide-x divide-gray-300 text-center p-4">
        <div>
          <ClockIcon className="mx-auto h-6 w-6 text-gray-600" />
          <p className="text-sm">{prepTime}</p>
        </div>

        <div>
          <PlayIcon className="mx-auto h-6 w-6 text-gray-600" />
          <p className="text-sm">Video Tutorial</p>
        </div>
      </div>

      {/* Video */}
      <div className="relative p-6">
        <img
          src={videoUrl}
          alt="Cooking Video"
          className="w-full h-full object-cover rounded-lg"
        />
        <div className="absolute inset-0 flex items-center justify-center">
          <PlayIcon className="h-12 w-12 text-white opacity-80" />
        </div>
      </div>

      {/* User Testimonials */}
      <div className="flex space-x-4 p-6">
        <div className="flex-1">
          <ThumbsUpIcon className="h-6 w-6 text-gray-600 mb-2" />
          <p className="text-sm">
            {positiveReviewsPercentage}% Positive Reviews
          </p>
        </div>
        <div className="flex-1">
          <ThumbsDownIcon className="h-6 w-6 text-gray-600 mb-2" />
          <p className="text-sm">
            {negativeReviewsPercentage}% Negative Reviews
          </p>
        </div>
      </div>

      {/* Comments */}
      <div className="p-6">
        <h2 className="text-2xl font-semibold mb-4 flex justify-between items-center">
          Comments
          {showComments ? (
            <ChevronUpIcon
              onClick={() => setShowComments(false)}
              className="h-6 w-6 cursor-pointer text-gray-600"
            />
          ) : (
            <ChevronDownIcon
              onClick={() => setShowComments(true)}
              className="h-6 w-6 cursor-pointer text-gray-600"
            />
          )}
        </h2>
      </div>
    </div>
  );
};

export default RecipeCard;