import type { FC, ReactNode } from 'react';
import { cn } from '../../lib/utils';

interface MobileCardProps {
  title: ReactNode;
  subtitle?: ReactNode;
  rows: { label: string; value: ReactNode }[];
  actions?: ReactNode;
  onClick?: () => void;
  className?: string;
}

export const MobileCard: FC<MobileCardProps> = ({
  title,
  subtitle,
  rows,
  actions,
  onClick,
  className,
}) => {
  return (
    <div
      className={cn(
        'bg-homenest-cream-light rounded-2xl border border-[#F5EBD8] shadow-sm p-4 sm:hidden',
        onClick && 'cursor-pointer active:bg-[#FEF3C7]',
        className
      )}
      onClick={onClick}
      role={onClick ? 'button' : undefined}
    >
      <div className="flex items-start justify-between gap-3 mb-3">
        <div className="min-w-0">
          <div className="text-sm font-medium text-homenest-bark truncate">{title}</div>
          {subtitle && <div className="text-xs text-[#7A5C44] mt-0.5">{subtitle}</div>}
        </div>
        {actions && <div className="flex items-center gap-1 shrink-0">{actions}</div>}
      </div>
      <div className="grid grid-cols-2 gap-y-2 gap-x-3">
        {rows.map((row, i) => (
          <div key={i} className={cn(i === 0 && rows.length % 2 === 1 ? 'col-span-2' : '')}>
            <p className="text-[10px] uppercase tracking-wider text-[#A87B5D]">{row.label}</p>
            <div className="text-sm text-homenest-bark truncate">{row.value}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default MobileCard;
