import { useContext } from 'react';
import { StoreContext } from '../../context/StoreContext';
import '../../styles/components/StoreTabs.css';

export default function StoreTabs() {
  const { stores, activeStore, setActiveStore, loading } = useContext(StoreContext);

  if (!stores || stores.length === 0) {
    return (
      <div className="store-tabs">
        <div className="store-tabs-empty">
          No stores available for this household
        </div>
      </div>
    );
  }

  return (
    <div className="store-tabs">
      <div className="store-tabs-container">
        {stores.map(store => (
          <button
            key={store.id}
            className={`store-tab ${store.id === activeStore?.id ? 'active' : ''}`}
            onClick={() => setActiveStore(store)}
            disabled={loading}
          >
            <span className="store-name">{store.display_name || store.name}</span>
          </button>
        ))}
      </div>
    </div>
  );
}