BiteCraft — Premium Culinary Directory & Recipe Sharing Platform

// src/utils/servingsScaler.ts - Dynamic Ingredient Proportions Scaler
export interface Ingredient {
  name: string;
  baseQuantity: number;
  unit: string;
  notes?: string;
}

export function scaleIngredientQuantity(
  baseQty: number,
  baseServings: number,
  targetServings: number
): number {
  if (baseServings <= 0 || targetServings <= 0) return baseQty;
  const ratio = targetServings / baseServings;
  return Math.round((baseQty * ratio) * 100) / 100;
}

export function formatCulinaryQuantity(qty: number): string {
  const whole = Math.floor(qty);
  const remainder = qty - whole;

  const fractionMap: { [key: number]: string } = {
    0.25: "¼",
    0.33: "⅓",
    0.5: "½",
    0.66: "⅔",
    0.75: "¾",
  };

  const closestFraction = Object.keys(fractionMap).find(
    (key) => Math.abs(parseFloat(key) - remainder) < 0.05
  );

  if (closestFraction && remainder > 0) {
    const fractionGlyph = fractionMap[parseFloat(closestFraction)];
    return whole > 0 ? `${whole} ${fractionGlyph}` : fractionGlyph;
  }

  return qty.toString();
}

// src/components/recipes/RecipeGrid.tsx - Dribbble-Style Recipe Feed
"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";

interface RecipeSummary {
  id: string;
  slug: string;
  title: string;
  category: string;
  prepTimeMinutes: number;
  coverImageUrl: string;
  chefName: string;
  chefAvatarUrl: string;
  bookmarksCount: number;
}

export function RecipeGrid({ initialRecipes }: { initialRecipes: RecipeSummary[] }) {
  const [activeCategory, setActiveCategory] = useState("All");

  const filteredRecipes = activeCategory === "All"
    ? initialRecipes
    : initialRecipes.filter((r) => r.category === activeCategory);

  return (
    <div className="w-full max-w-7xl mx-auto px-4 py-8">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {filteredRecipes.map((recipe) => (
          <Link 
            key={recipe.id} 
            href={`/recipes/${recipe.slug}`} 
            className="group block rounded-2xl bg-[#140e09] border border-amber-500/15 overflow-hidden transition-all duration-300 hover:border-amber-500/40 hover:-translate-y-1 shadow-lg"
          >
            <div className="relative w-full aspect-[4/3] bg-neutral-900 overflow-hidden">
              <Image
                src={recipe.coverImageUrl}
                alt={recipe.title}
                fill
                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                className="object-cover transition-transform duration-500 group-hover:scale-105"
              />
              <span className="absolute top-3 left-3 bg-black/75 backdrop-blur-md px-2.5 py-1 rounded-full text-[11px] font-mono font-bold text-amber-300 border border-white/10">
                {recipe.prepTimeMinutes} Min
              </span>
            </div>
            <div className="p-4">
              <h3 className="font-serif font-bold text-base text-white group-hover:text-amber-400 transition-colors line-clamp-1">
                {recipe.title}
              </h3>
              <div className="flex items-center justify-between mt-3 pt-3 border-t border-white/5 text-xs text-neutral-400">
                <span>By {recipe.chefName}</span>
                <span className="font-mono text-amber-300">★ 4.9</span>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}