import type { RecipeInstruction } from "../../types/recipe";

interface InstructionListProps {
  instructions: RecipeInstruction[];
}
export default function InstructionList({ instructions }: InstructionListProps) {
  return (
    <>
      <div className="px-4 py-8 md:px-8">
        <h2 className="text-2xl text-gray-800 font-semibold mb-2">Instructions</h2>
        <hr className="text-gray-300" />
        <ul className="text-lg my-4 text-gray-700">
          {instructions?.map((instruction, i) => (
            <li key={instruction.Id || crypto.randomUUID()} className="p-4 flex items-start gap-x-4 odd:bg-[#f8f8f8]">
              <div className="size-8 md:size-10 bg-blue-50 rounded-full flex items-center justify-center flex-shrink-0">
                <h3 className="text-base md:text-xl text-blue-600 font-semibold">{i + 1}</h3>
              </div>
              <p className="text-base">{instruction.Content}</p>
            </li>
          ))}
        </ul>
      </div>

    </>
  );
}
