import { ExternalLink } from "lucide-react";
import RightDrawer from "@/components/right-drawer";
import { useDrawer } from "@/hooks/use-drawer";
import RepoView from "@/components/repo/repo-view";

type Props = {
  workspace: string;
  repo: string;
  children: React.ReactNode;
};

export default function RepoDrawer({ workspace, repo, children }: Props) {
  const { open, openDrawer, closeDrawer } = useDrawer();
  const repoUrl = `/${workspace}/repo/${repo}`;

  return (
    <>
      <span onClick={openDrawer} className="cursor-pointer contents">
        {children}
      </span>

      <RightDrawer
        actions={
          <a
            className="inline-flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 text-[11px] text-muted-foreground/50 transition-colors hover:bg-accent/50 hover:text-foreground"
            href={repoUrl}
            rel="noopener noreferrer"
            target="_blank"
          >
            <ExternalLink className="size-3.5" />
            Open
          </a>
        }
        onClose={closeDrawer}
        open={open}
        title={`${workspace}/${repo}`}
        width="max-w-[90vw]"
      >
        <RepoView repo={repo} workspace={workspace} />
      </RightDrawer>
    </>
  );
}
