import type { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

export function ActionTile({
  icon: Icon,
  label,
  description,
  className,
  onClick
}: {
  icon: LucideIcon;
  label: string;
  description?: string;
  className?: string;
  onClick?: () => void;
}) {
  const content = (
    <>
      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white">
        <Icon className="h-5 w-5" />
      </div>
      <div className="max-w-[92px] text-[12px] font-medium leading-tight">{label}</div>
      {description ? <p className="line-clamp-2 text-[11px] leading-tight text-[#667085]">{description}</p> : null}
    </>
  );

  const baseClass = cn('flex min-h-[92px] flex-col items-center justify-center gap-2 rounded-[22px] bg-[#f4f5f8] p-3 text-center', className);

  if (onClick) {
    return (
      <button type="button" onClick={onClick} className={cn(baseClass, 'transition hover:bg-[#eceef4]')}>
        {content}
      </button>
    );
  }

  return <div className={baseClass}>{content}</div>;
}

export function SectionTitle({ children }: { children: React.ReactNode }) {
  return <h2 className="mb-4 mt-8 text-[26px] font-medium tracking-tight">{children} ›</h2>;
}