"use client";

import React from "react";
import { Button } from "@/components/ui/button";

interface RatingSelectorProps {
  rating: number; // current rating (0 if none selected)
  maxRating: number;
  onSelect: (rating: number) => void;
}

// Define colors for each score:
// - selected: for a tile when it is part of the chosen rating (e.g. if rating is 3, tiles 1-3 get the selected color)
// - card: light background for the property card when rated
// - text: can be used if you need a text color (here not directly used)
export const ratingMapping: Record<number, { selected: string; card: string; text: string }> = {
  1: { selected: "bg-red-500", card: "bg-red-50", text: "text-red-500" },
  2: { selected: "bg-orange-500", card: "bg-orange-50", text: "text-orange-500" },
  3: { selected: "bg-yellow-500", card: "bg-yellow-50", text: "text-yellow-500" },
  4: { selected: "bg-lime-500", card: "bg-lime-50", text: "text-lime-500" },
  5: { selected: "bg-green-500", card: "bg-green-50", text: "text-green-500" },
};

const RatingSelector: React.FC<RatingSelectorProps> = ({ rating, maxRating, onSelect }) => {
  // If a rating is set (> 0), use that mapping for all selected tiles.
  const currentMapping = rating > 0 ? ratingMapping[rating] : null;

  return (
    <div className="flex space-x-2">
      {Array.from({ length: maxRating }, (_, i) => {
        const value = i + 1;
        const isSelected = value <= rating;
        // When selected, use the tile color; if not, use an outlined style.
        const tileClasses = isSelected && currentMapping 
          ? `${currentMapping.selected} text-left` 
          : "border border-gray-300";
        return (
          <Button
            key={i}
            variant="outline"
            className={`w-8 h-8 p-0 ${tileClasses} hover:${tileClasses}`}
            onClick={() => onSelect(value)}
          >
            <span className={`w-full text-center ${isSelected?'text-white':''} flex items-center justify-center px-1`}>{value}</span>
          </Button>
        );
      })}
    </div>
  );
};

export default RatingSelector;