import { cn, toBn } from '@/lib/utils';

const ComparisonStickyBottom = ({
  selectedCandidates,
  showAnalytics,
  handleShowComparison,
  setShowAnalytics,
  setSelectedCandidates,
}: {
  selectedCandidates: number[];
  showAnalytics: boolean;
  handleShowComparison: () => void;
  setShowAnalytics: (value: boolean) => void;
  setSelectedCandidates: (value: number[]) => void;
}) => {
  return (
    <div
      id="sticky-bottom-bar"
      className={cn(
        'max-w-5xl mx-auto fixed bottom-0 left-0 right-0 bg-white border-t border-blue-100 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] z-50 transform translate-y-full transition-transform duration-300 rounded-t-lg overflow-hidden',
        selectedCandidates.length >= 2 ? 'translate-y-0' : 'translate-y-full',
      )}
    >
      <div className="px-3 sm:px-4 lg:px-8 flex justify-between items-center h-14 sm:h-16 md:h-20">
        <div>
          <p className="text-xs sm:text-xs md:text-xs text-gray-500">নির্বাচিত প্রার্থী</p>
          <p className="font-bold text-blue-900 text-xs sm:text-sm md:text-base">
            <span id="mobile-select-count">{toBn(selectedCandidates.length)}</span> /{' '}
            <span className="max-compare-count">৩</span>
            জন
          </p>
        </div>
        {showAnalytics ? (
          <button
            onClick={() => {
              setShowAnalytics(false);
              setSelectedCandidates([]);
            }}
            className="bg-red-600 hover:bg-red-700 active:bg-red-700 text-white px-3 py-2 sm:px-4 sm:py-2 md:px-6 md:py-3 rounded-lg md:rounded-xl font-bold shadow hover:shadow-lg transition flex items-center gap-1.5 md:gap-2 text-sm sm:text-xs md:text-sm"
          >
            <span className="material-symbols-outlined text-base sm:text-lg md:text-xl">close</span>
            বাতিল করুন
          </button>
        ) : (
          <button
            onClick={handleShowComparison}
            id="sticky-bottom-bar-btn"
            className="bg-blue-600 active:bg-blue-700 text-white px-3 py-2 sm:px-4 sm:py-2 md:px-6 md:py-3 rounded-lg md:rounded-xl font-bold shadow hover:shadow-lg transition flex items-center gap-1.5 md:gap-2 text-sm sm:text-xs md:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <span className="material-symbols-outlined text-base sm:text-lg md:text-xl">
              analytics
            </span>
            তুলনা করি
          </button>
        )}
      </div>
    </div>
  );
};

export default ComparisonStickyBottom;