import { queryOMDb } from "@/api/omdb";
import { INextJsProps } from "../Search/page";
import ImgCard from "@/common/components/ImgCard";
import { stringifyQueryParams } from "@/common/utils/searchParams";

export default async function Movie({ searchParams }: INextJsProps) {
  const movie = await queryOMDb(stringifyQueryParams(searchParams!));
  const { Poster, Title, Ratings, ...details } = movie;
  return (
    <div className="rounded p-4  bg-gray-300 w-auto mx-4 flex-column h-xl">
      <ImgCard
        width={400}
        height={580}
        src={Poster !== "N/A" ? Poster : ""}
        alt={`${details.Title} Movie Poster`}
      >
        <div className="mt-auto">
          <h3 className="mb-2 text-lg font-semibold">{Title}</h3>
          {Object.entries(details).map(([key, value]) => {
            return (
              <p key={key} className="mb-2 text-sm text-gray-700">
                <strong>{key}: </strong>
                {value as string}
              </p>
            );
          })}
          <h3>Ratings:</h3>
          <ul>
            {Ratings.map((r: { Source: string; Value: string }) => (
              <li key={r.Source}>
                {r.Source} - {r.Value}
              </li>
            ))}
          </ul>
        </div>
      </ImgCard>
    </div>
  );
}