import type { RecipeView } from '@tinywaste/game-core';
import { getItemArt } from '../../uiAssets';
import { AssetThumb } from '../AssetThumb';

export function RecipeCard({
  recipe,
  busy,
  onCraft,
}: {
  recipe: RecipeView;
  busy: boolean;
  onCraft: () => void;
}) {
  const primaryOutput = recipe.outputs[0];

  return (
    <article className={`recipe-card ${recipe.craftable ? 'craftable' : ''}`}>
      <AssetThumb src={getItemArt(primaryOutput?.itemId)} label={recipe.name} />
      <div className="recipe-copy">
        <strong>{recipe.name}</strong>
        <p>{recipe.desc}</p>
        <small>
          {recipe.timeCostMin} 分钟 · 精力 -{recipe.energyCost}
        </small>
        <small>
          需求：{recipe.inputs.map((input) => `${input.name} ${input.owned}/${input.count}`).join(' · ')}
        </small>
      </div>
      <div className="recipe-actions">
        <button className="small-button" onClick={onCraft} disabled={!recipe.craftable || busy}>
          制作
        </button>
        {recipe.disabledReason ? <em>{recipe.disabledReason}</em> : null}
      </div>
    </article>
  );
}