/**
 * @ai-summary Mobile pill button component with gradient styling
 */

import React from 'react';
import { clsx } from 'clsx';

// Theme colors now defined in Tailwind config

interface MobilePillProps {
  active?: boolean;
  label: string;
  onClick?: () => void;
  icon?: React.ReactNode;
  className?: string;
}

export const MobilePill: React.FC<MobilePillProps> = ({ 
  active = false, 
  label, 
  onClick, 
  icon, 
  className 
}) => {
  return (
    <button
      onClick={onClick}
      className={clsx(
        "group h-11 rounded-2xl text-sm font-medium border transition flex items-center justify-center gap-2 backdrop-blur",
        active
          ? "text-white border-transparent shadow-lg bg-gradient-moto"
          : "bg-white/80 dark:bg-nero/80 text-slate-800 dark:text-avus border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-inactive",
        className
      )}
    >
      {icon}
      <span>{label}</span>
    </button>
  );
};