recuperando informacion y tratandola

components/MovieHeader.tsx

@@ -3,20 +3,37 @@ import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
 import { getPosterUrl, getUsCertification, type TmdbMovieDetails } from "@/lib/tmdb";
 
-export function MovieHeader({ movie }: { movie: TmdbMovieDetails }) {
+export function MovieHeader({
+  movie,
+  onClear,
+}: {
+  movie: TmdbMovieDetails;
+  onClear?: () => void;
+}) {
   const poster = getPosterUrl(movie.poster_path, "w500");
   const year = movie.release_date?.slice(0, 4);
   const certification = getUsCertification(movie);
 
   return (
     <div className="space-y-6">
-      <Link
-        href="/"
-        className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
-      >
-        <ArrowLeft className="h-4 w-4" />
-        Back to search
-      </Link>
+      {onClear ? (
+        <button
+          type="button"
+          onClick={onClear}
+          className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Search another movie
+        </button>
+      ) : (
+        <Link
+          href="/"
+          className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to search
+        </Link>
+      )}
 
       <div className="flex flex-col gap-6 sm:flex-row sm:items-end">
         <div className="relative mx-auto h-56 w-36 shrink-0 overflow-hidden rounded-2xl border border-white/10 bg-slate-900 shadow-2xl sm:mx-0">