import type { Recipe } from "../../types/recipe"
import ServingSizeIcon from "../icons/ServingSizeIcon"
import StarIcon from "../icons/StarIcon"
import TimeIcon from "../icons/TimeIcon"

function displayDifficulty(diff: number): string {
  switch (diff) {
    case 1:
      return "Beginner"
    case 2:
      return "Easy"
    case 3:
      return "Intermediate"
    case 4:
      return "Challenging"
    case 5:
      return "Extreme"
    default:
      return ""
  }
}

interface RecipeMetaDataProps {
  recipe: Recipe | null;
}

export default function RecipeMetaData({ recipe }: RecipeMetaDataProps) {
  return (
    <div
      className="border border-blue-300 bg-blue-50 text-gray-700 mx-4 md:mx-8 rounded-lg flex flex-col 
  md:flex-row justify-center items-center py-8"
    >
      <div className="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-full md:w-1/4">
        <TimeIcon />
        <p>Prep: {recipe?.Duration.Prep ?? 0} min</p>
        <p>Cook: {recipe?.Duration.Cook ?? 0} min</p>
      </div>
      <div
        className="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 border-y md:border-y-0 md:border-x border-blue-300 py-8 w-9/10 md:w-fit md:py-0 px-8"
      >
        <div className="flex gap-x-1 my-2">
          {Array.from({ length: recipe?.Difficulty ?? 0 }).map((_, i) => (
            <StarIcon key={`${recipe?.Id}-filled-${i}`} size={6} filled={true} />
          ))}
          {Array.from({ length: 5 - (recipe?.Difficulty ?? 0) }).map((_, i) => (
            <StarIcon key={`${recipe?.Id}-unfilled-${i}`} size={6} filled={false} />
          ))}
        </div>
        <p>{displayDifficulty(recipe?.Difficulty ?? 0)}</p>
      </div>
      <div className="flex flex-col items-center justify-center text-sm my-4 md:my-0 mx-4 w-1/4">
        <ServingSizeIcon />
        <p>Serves {recipe?.Serves ?? 0}</p>
      </div>
    </div>

  );
}
