import {
  Button,
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
} from "@repo/shadcn-ui/components";
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 (
    <Card className={className}>
      <CardHeader>
        <CardTitle id="right-panel-title">{title}</CardTitle>
        <CardAction>
          {headerActions}
          {onOpenChange ? (
            <Button
              aria-label="Cerrar panel"
              onClick={() => onOpenChange(false)}
              size="icon-sm"
              variant="ghost"
            >
              <XIcon className="size-4" />
            </Button>
          ) : null}
        </CardAction>
      </CardHeader>
      <CardContent className="-mx-4">{children}</CardContent>
    </Card>
  );
};