import "./Guide.css";
import { useParams, Link } from "react-router";
import { useGuides } from "../../../lib/contexts/guide.context";
import useGuide from "../hooks/useGuide";
import Frame from "../../../components/frame/Frame";

export default function Guide() {
  const { id } = useParams();
  const { guides } = useGuides();
  const { deleteGuide, exportGuide } = useGuide();
  const guide = guides.find((g) => g.id === id);

  if (!guide) return null;

  return (
    <div className="guide">
      <h1>{guide.title}</h1>
      <p>{guide.description}</p>

      <hr />

      <div className="guide__frames">
        {guide.frames.map((frame, index) => (
          <Frame key={index} frame={frame} />
        ))}
      </div>

      <button className="delete-button" onClick={() => deleteGuide(guide.id)}>
        Delete
      </button>
      <Link className="edit-button" to={`/edit-guide/${guide.id}`}>
        Edit
      </Link>
      <button className="export-button" onClick={exportGuide}>
        Export PDF
      </button>
    </div>
  );
}