import { Button } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { XIcon } from "lucide-react";

import type { RightPanelProps } from "./right-panel-types.ts";

export const RightPanel = ({
  open,
  title,
  className,
  headerActions,
  children,
  onOpenChange,
}: RightPanelProps) => {
  if (!open) return null;

  return (
    <aside
      aria-labelledby="right-panel-title"
      className={cn("flex h-full flex-col bg-background", className)}
    >
      <div className="flex items-center justify-between border-b px-4 py-3">
        <h2 className="truncate text-sm font-semibold" id="right-panel-title">
          {title}
        </h2>

        <div className="flex items-center gap-1">
          {headerActions}

          {onOpenChange ? (
            <Button
              aria-label="Cerrar panel"
              onClick={() => onOpenChange(false)}
              size="icon-sm"
              variant="ghost"
            >
              <XIcon className="size-4" />
            </Button>
          ) : null}
        </div>
      </div>

      <div className="flex-1 overflow-auto">{children}</div>
    </aside>
  );
};