import { Button, CardHeader, CardTitle, Badge } from '../../core';
import { useT } from '../../../hooks/useT';

export type ViewsHeaderProps = {
  count: number;
  hasActiveView: boolean;
  canAdd?: boolean;
  onAdd?: () => void;
};

export function ViewsHeader({ count, hasActiveView, canAdd, onAdd }: ViewsHeaderProps) {
  const t = useT();

  return (
    <CardHeader className="ask-flex ask-items-start ask-justify-between ask-gap-3 ask-border-b ask-border-borderSubtle ask-pb-3">
      <div className="ask-min-w-0">
        <div className="ask-flex ask-items-center ask-gap-2">
          <CardTitle>{t('modules.views', 'Views')}</CardTitle>
          <Badge variant="neutral">{count}</Badge>
        </div>
        <div className="ask-mt-1 ask-text-[11px] ask-text-textMuted">
          {hasActiveView
            ? t('ui.manage_and_switch_between_canvas_views', 'Manage and switch between canvas views.')
            : t('ui.create_your_first_view_to_start_designing', 'Create your first view to start designing.')}
        </div>
      </div>

      {canAdd ? (
        <Button
          size="sm"
          variant="secondary"
          onClick={onAdd}
          className="ask-min-w-[92px] ask-px-4 ask-whitespace-nowrap"
        >
          {t('ui.add_view', 'Add view')}
        </Button>
      ) : null}
    </CardHeader>
  );
}
