'use client';

import React from 'react';
import Link from 'next/link';
import { useCompare } from '@/context/CompareContext';
import { useLanguage } from '@/context/LanguageContext';
import styles from './CompareBar.module.css';

export default function CompareBar() {
  const { products, removeProduct, clearAll, count } = useCompare();
  const { t, language } = useLanguage();

  if (count === 0) return null;

  return (
    <div className={styles.bar}>
      <div className={styles.inner}>
        <span className={styles.label}>
          ⚖️ {language === 'ar' ? `${count} هواتف للمقارنة` : `${count} phone${count > 1 ? 's' : ''} to compare`}
        </span>

        <div className={styles.items}>
          {products.map(p => (
            <div key={p.id} className={styles.item}>
              <span className={styles.itemName}>{language === 'ar' ? p.nameAr : p.name}</span>
              <button className={styles.remove} onClick={() => removeProduct(p.id)}>✕</button>
            </div>
          ))}
        </div>

        <div className={styles.actions}>
          <Link href="/compare" className="btn btn-primary btn-sm">
            {t.compare.title}
          </Link>
          <button className="btn btn-ghost btn-sm" onClick={clearAll}>
            {t.compare.clear}
          </button>
        </div>
      </div>
    </div>
  );
}
