"use client";
import { GetAnimeBySlugResponse } from "../../actions/getAnimeBySlug";
import GenreTags from "@/shared/components/GenreTags";

const AnimeInformationClient = ({ data }: { data: GetAnimeBySlugResponse }) => {
  return (
    <section className="flex gap-4">
      <div>
        <img
          src={data.data.pictureMedium}
          alt={data.data.title}
          className="h-fit w-78 overflow-hidden rounded-lg"
        />
      </div>
      <div className="tracking-tight">
        <div className="flex flex-col gap-0.5">
          <h1 className="tracking-tighter text-5xl font-bold">
            {data.data.title}
          </h1>
          <h3 className="ml-0.5 tracking-tight text-xl font-medium text-muted-foreground">
            {data.data.titleAlternative[0].title}
          </h3>
        </div>
        <div className="mt-2">
          <GenreTags genres={data.data.genres} />
        </div>
        <table>
          <tbody>
            <tr className="">
              <td className="font-medium text-sm text-muted-foreground">
                Score
              </td>
              <td className="text-sm">{data.data.score}</td>
            </tr>
            <tr>
              <td className="font-medium text-sm text-muted-foreground">
                Status
              </td>
              <td className="text-sm">{data.data.status}</td>
            </tr>
            <tr>
              <td className="font-medium text-sm text-muted-foreground">
                Airing
              </td>
              <td className="text-sm">
                {data.data.startAiring} - {data.data.endAiring}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  );
};

export default AnimeInformationClient;