import type { FunctionalComponent } from 'preact';

import { AsukaIcon } from '../../core/AsukaIcon';
import { cn } from '../../core/cn';

type ElementPreviewProps = {
  src?: string | null;
  fallbackIcon?: string;
  className?: string;
  imageClassName?: string;
  iconClassName?: string;
  size?: 'sm' | 'md';
};

const SIZE_CLASS: Record<NonNullable<ElementPreviewProps['size']>, string> = {
  sm: 'ask-h-8 ask-w-8 ask-rounded-lg',
  md: 'ask-h-10 ask-w-10 ask-rounded-xl',
};

export const ElementPreview: FunctionalComponent<ElementPreviewProps> = ({
  src,
  fallbackIcon = 'elements',
  className,
  imageClassName,
  iconClassName,
  size = 'md',
}) => {
  const source = String(src ?? '').trim();

  return (
    <div
      className={cn(
        'ask-flex ask-shrink-0 ask-items-center ask-justify-center ask-overflow-hidden ask-border ask-border-borderSubtle ask-bg-primary/5',
        SIZE_CLASS[size],
        className,
      )}
    >
      {source ? (
        <img src={source} className={cn('ask-h-6 ask-w-6 ask-object-contain', imageClassName)} />
      ) : (
        <AsukaIcon name={fallbackIcon} size={size === 'sm' ? 15 : 16} className={cn('ask-text-primary', iconClassName)} />
      )}
    </div>
  );
};
