import { TabsClient, type TabDef } from "@/components/TabsClient";
import { PortableText } from "@portabletext/react";
import { portableTextComponents } from "@/lib/portableTextComponents";
import { ArtistWorksTab, type ComposedWork } from "@/components/artist/ArtistWorksTab";

type Props = {
  bio: any;
  hasReleases?: boolean;
  releasesTab?: React.ReactNode;
  composedWorks?: ComposedWork[];
  arrangedWorks?: ComposedWork[];
  concerts?: React.ReactNode;
};

export function ArtistTabs({ bio, hasReleases, releasesTab, composedWorks, arrangedWorks, concerts }: Props) {
  const tabs: TabDef[] = [
    {
      id: "bio",
      label: "Biography",
      content: (
        <article className="prose max-w-none text-lighttext dark:prose-invert dark:text-darktext prose-h2:!mt-[3em] prose-h2:font-silkasb prose-h2:text-base">
          <h2 className="sr-only">Biography</h2>
          {bio ? <PortableText value={bio} components={portableTextComponents} /> : <p>No biography available yet.</p>}
        </article>
      ),
    },
  ];

  if (composedWorks?.length || arrangedWorks?.length) {
    tabs.push({
      id: "works",
      label: "Works",
      content: <ArtistWorksTab composedWorks={composedWorks} arrangedWorks={arrangedWorks} />,
    });
  }

  if (concerts) {
    tabs.push({
      id: "concerts",
      label: "Concerts",
      content: concerts,
    });
  }

  if (hasReleases) {
    tabs.push({
      id: "releases",
      label: "Releases",
      content: releasesTab,
    });
  }

  return <TabsClient defaultTabId="bio" tabs={tabs} />;
}