import type { FrameType } from "../../lib/schemas";

export default function Frame({ frame } : { frame: FrameType }) {
  return (
    <div className="frame">
      <h2>{frame.title}</h2>
      <img src={URL.createObjectURL(frame.file)} alt={frame.title} />

      <ol className="steps">
        {frame.steps.map((step, stepIndex) => (
          <li key={stepIndex} className="step">
            <span>{stepIndex + 1}.</span>{step.text}
          </li>
        ))}
      </ol>
    </div>
  );
}