
import React from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Star } from "lucide-react";

interface TestimonialContentProps {
  quote: string;
  rating: number;
  onQuoteChange: (value: string) => void;
  onRatingChange: (rating: number) => void;
}

const TestimonialContent = ({
  quote,
  rating,
  onQuoteChange,
  onRatingChange
}: TestimonialContentProps) => {
  return (
    <>
      <div>
        <Label htmlFor="quote">Témoignage *</Label>
        <Textarea
          id="quote"
          value={quote}
          onChange={(e) => onQuoteChange(e.target.value)}
          rows={4}
          required
        />
      </div>

      <div>
        <Label>Note *</Label>
        <div className="flex items-center space-x-1 mt-2">
          {[1, 2, 3, 4, 5].map((star) => (
            <button
              key={star}
              type="button"
              onClick={() => onRatingChange(star)}
              className="focus:outline-none"
            >
              <Star
                className={`w-6 h-6 ${
                  star <= rating
                    ? "text-yellow-400 fill-current"
                    : "text-gray-300"
                }`}
              />
            </button>
          ))}
          <span className="ml-2 text-sm text-gray-600">
            {rating}/5
          </span>
        </div>
      </div>
    </>
  );
};

export default TestimonialContent;
