import { ChevronRightIcon } from "@repo/rdx-ui/lib/icons";
import { Button } from "@repo/shadcn-ui/components/button";
import type { ReactNode } from "react";
import { useTranslation } from "react-i18next";

export function DashboardPanel({
  title,
  icon,
  action,
  children,
}: {
  title: string;
  icon?: ReactNode;
  action?: () => void;
  children: ReactNode;
}) {
  const { t } = useTranslation("companies");
  return (
    <section
      aria-label={title}
      className="min-w-0 rounded-panel border border-border bg-card p-4 shadow-[0_1px_2px_color-mix(in_srgb,var(--foreground)_5%,transparent)] shell:p-5"
    >
      <div className="mb-4 flex items-center justify-between gap-3">
        <h2 className="flex items-center gap-3 text-base font-semibold">
          {icon && (
            <span aria-hidden="true" className="[&_svg]:size-5">
              {icon}
            </span>
          )}
          {title}
        </h2>
        {action && (
          <Button
            className="app-link text-primary hover:text-primary shrink-0"
            onClick={action}
            size="sm"
            variant="ghost"
          >
            {t("dashboard.viewAll")}
            <ChevronRightIcon aria-hidden="true" className="size-4" />
          </Button>
        )}
      </div>
      {children}
    </section>
  );
}