import type { JSX } from 'preact';
import { ScrollArea } from './ScrollArea';
import { cn } from './cn';

export function Card({ className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'ask-module-card ask-card ask-flex ask-min-h-0 ask-min-w-0 ask-flex-col ask-overflow-hidden ask-rounded-[22px] ask-border ask-border-borderSubtle ask-bg-surfaceAlt',
        className
      )}
      {...props}
    />
  );
}

export function CardHeader({ className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('ask-module-header ask-card__header ask-px-4 ask-pt-4 ask-pb-2', className)} {...props} />;
}

export function CardTitle({ className, ...props }: JSX.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('ask-module-title ask-card__title ask-text-[13px] ask-font-semibold ask-leading-5 ask-tracking-[-0.01em] ask-text-textMain', className)} {...props} />;
}

type CardContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
  scrollable?: boolean;
  viewportClassName?: string;
  contentClassName?: string;
  axis?: 'vertical' | 'horizontal' | 'both';
};

export function CardContent({
  className,
  children,
  scrollable = false,
  viewportClassName,
  contentClassName,
  axis = 'vertical',
  ...props
}: CardContentProps) {
  if (!scrollable) return <div className={cn('ask-module-content ask-card__content ask-min-w-0 ask-p-4', className)} {...props}>{children}</div>;

  return (
    <div
      className={cn('ask-module-content ask-card__content ask-min-w-0 ask-flex-1 ask-min-h-0 ask-overflow-hidden ask-p-4', className)}
      {...props}
    >
      <ScrollArea
        className="ask-h-full ask-min-h-0"
        viewportClassName={cn('ask-h-full ask-pr-2', viewportClassName)}
        contentClassName={contentClassName}
        axis={axis}
      >
        {children}
      </ScrollArea>
    </div>
  );
}
