// @design-system: feedback/RetryPanel
/**
 * RetryPanel - retry fallback for ErrorBoundary wrapping lazy chunks.
 *
 * Strings pulled from the `error` namespace (`retry_panel_title` + `retry_panel_action`).
 * Pass an explicit `message` prop to override the default title.
 *
 * @example
 * <ErrorBoundary fallback={<RetryPanel onRetry={() => location.reload()} />}>
 *   <LazyIsland />
 * </ErrorBoundary>
 */

'use client';

import { cn } from '@/lib/cn';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';

export type RetryPanelVariant = 'inline' | 'card';

export interface RetryPanelProps {
  /** Called when the user clicks the retry action. */
  onRetry: () => void;
  /** Override the default panel title. */
  message?: string;
  /** Visual treatment. @default 'card' */
  variant?: RetryPanelVariant;
  className?: string;
}

const variantClasses: Record<RetryPanelVariant, string> = {
  inline: 'gap-2 px-3 py-2',
  card: 'gap-3 rounded-md border border-border-default bg-surface-base p-6',
};

export function RetryPanel({ onRetry, message, variant = 'card', className }: RetryPanelProps) {
  const t = useT('error');
  const title = message ?? t('retry_panel_title');
  const actionLabel = t('retry_panel_action');

  return (
    <div
      role="alert"
      data-variant={variant}
      className={cn(
        'flex flex-col items-center justify-center text-center',
        variantClasses[variant],
        className,
      )}
    >
      <span className="text-text-muted flex items-center justify-center" aria-hidden="true">
        <Icon name="RefreshCw" size="lg" color="muted" mirror />
      </span>
      <p className="text-text-primary text-base font-medium leading-[var(--line-height-tight)]">
        {title}
      </p>
      <Button
        variant="secondary"
        size="md"
        onClick={onRetry}
        iconStart={<Icon name="RefreshCw" size="sm" mirror />}
      >
        {actionLabel}
      </Button>
    </div>
  );
}