import type { HTMLAttributes, ReactNode } from 'react';
import { InfoTip } from './InfoTip';

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
  hover?: boolean;
  padding?: boolean;
}

export function Card({
  children,
  hover = false,
  padding = true,
  className = '',
  ...props
}: CardProps) {
  return (
    <div
      className={`bg-white border border-gray-100 rounded-xl card-surface ${
        padding ? 'p-5' : ''
      } ${hover ? 'card-hover' : ''} ${className}`}
      {...props}
    >
      {children}
    </div>
  );
}

export function CardHeader({
  children,
  className = '',
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={`flex items-center justify-between mb-4 ${className}`}>
      {children}
    </div>
  );
}

export function CardTitle({
  children,
  className = '',
  info,
}: {
  children: ReactNode;
  className?: string;
  /** Optional info icon with explanation (hover / focus) */
  info?: string;
}) {
  return (
    <h3
      className={`flex items-center gap-1.5 text-sm font-semibold text-gray-900 ${className}`}
    >
      <span>{children}</span>
      {info ? <InfoTip text={info} /> : null}
    </h3>
  );
}
