import { RefreshCwIcon } from "lucide-react";
import type { ReactNode } from "react";

import { cn } from "../../lib/utils";
import { Button } from "../ui/button";

export function ClerkUserProfilePage({
  action,
  children,
  className,
  description,
  title,
}: {
  readonly action?: ReactNode;
  readonly children: ReactNode;
  readonly className?: string;
  readonly description?: ReactNode;
  readonly title: ReactNode;
}) {
  return (
    <div className={cn("w-full min-w-0 text-foreground", className)}>
      <header className="flex flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between sm:gap-4 sm:pr-8">
        <div className="min-w-0">
          <h2 className="text-[1.0625rem] leading-6 font-semibold">{title}</h2>
          {description ? (
            <p className="mt-1 max-w-[34rem] text-[0.8125rem] leading-[1.125rem] text-muted-foreground sm:min-h-9">
              {description}
            </p>
          ) : null}
        </div>
        {action ? <div className="shrink-0">{action}</div> : null}
      </header>

      {children}
    </div>
  );
}

export function ClerkUserProfileRefreshButton({
  className,
  disabled = false,
  isPending,
  onClick,
}: {
  readonly className?: string;
  readonly disabled?: boolean;
  readonly isPending: boolean;
  readonly onClick: () => void;
}) {
  return (
    <Button
      size="sm"
      variant="outline"
      className={cn("text-[0.8125rem]", className)}
      disabled={disabled || isPending}
      onClick={onClick}
    >
      <RefreshCwIcon aria-hidden="true" className={cn("size-3.5", isPending && "animate-spin")} />
      Refresh
    </Button>
  );
}

export function ClerkUserProfileRow({
  children,
  className,
  icon,
}: {
  readonly children: ReactNode;
  readonly className?: string;
  readonly icon: ReactNode;
}) {
  return (
    <li className={cn("border-t py-4 first:border-t-0", className)}>
      <div className="flex items-start gap-3">
        <div
          aria-hidden="true"
          className="flex size-8 shrink-0 items-center justify-center rounded-lg border bg-muted/32 text-muted-foreground"
        >
          {icon}
        </div>
        <div className="min-w-0 flex-1">{children}</div>
      </div>
    </li>
  );
}