/**
 * Billing Navigation Component
 * 
 * Provides navigation between billing views.
 * Simplified: Übersicht (Dashboard) + Daten (FormGeneratorTable view)
 */

import React from 'react';
import { NavLink } from 'react-router-dom';
import styles from './Billing.module.css';

export const BillingNav: React.FC = () => {
  const navLinkStyle = (isActive: boolean) => ({
    padding: '8px 16px',
    textDecoration: 'none',
    borderRadius: '4px',
    backgroundColor: isActive ? 'var(--color-primary)' : 'transparent',
    color: isActive ? 'white' : 'var(--color-text)',
    fontWeight: isActive ? 600 : 400,
  });

  return (
    <nav className={styles.billingNav} style={{
      display: 'flex',
      gap: '8px',
      marginBottom: '24px',
      borderBottom: '1px solid var(--color-border)',
      paddingBottom: '8px'
    }}>
      <NavLink
        to="/billing"
        end
        className={({ isActive }) => 
          `${styles.navLink} ${isActive ? styles.navLinkActive : ''}`
        }
        style={({ isActive }) => navLinkStyle(isActive)}
      >
        Übersicht
      </NavLink>
      
      <NavLink
        to="/billing/transactions"
        className={({ isActive }) => 
          `${styles.navLink} ${isActive ? styles.navLinkActive : ''}`
        }
        style={({ isActive }) => navLinkStyle(isActive)}
      >
        Transaktionen
      </NavLink>
    </nav>
  );
};

export default BillingNav;