import type { FunctionalComponent } from 'preact';

import { ActionRow } from '../../core';
import { AsukaIcon } from '../../core/AsukaIcon';
import { Button } from '../../core/Button';

type ElementsHeaderProps = {
  t: (key: string, fallback?: any) => string;
  canEditElements?: boolean;
  onAdd: () => void;
};

export const ElementsHeader: FunctionalComponent<ElementsHeaderProps> = ({ t, canEditElements, onAdd }) => (
  <div className="ask-flex ask-items-center ask-justify-between ask-gap-3 ask-px-3 ask-pt-2">
    <div>
      <div className="ask-text-sm ask-font-medium ask-text-textMain">{t('elements.title', 'Elements')}</div>
      <div className="ask-text-xs ask-text-textMuted">{t('elements.currentViewOnly', 'Current view only')}</div>
    </div>
    <ActionRow wrap={false} compact>
      <Button type="button" variant="primary" size="md" onClick={onAdd} disabled={!canEditElements} className="ask-min-w-[92px]">
        <AsukaIcon name="plus" className="ask-text-white" size={14} />
        <span>{t('elements.add', 'Add')}</span>
      </Button>
    </ActionRow>
  </div>
);
