// Named imports for specific components
import { Button, Input, Modal, Card } from '../fever-components/src';

// Import all components
import * as FeverComponents from '../fever-components/src';

// Import with custom naming
import { Button as FeverButton } from '../fever-components/src';

// In your main App.tsx or layout component
import '../fever-components/src/styles/base.css';

// Or in your global CSS file
@import '../fever-components/src/styles/base.css';

import React, { useState } from 'react';
import { Button, Alert, Modal } from '../fever-components/src';

function MyApp() {
  const [showAlert, setShowAlert] = useState(false);
  const [showModal, setShowModal] = useState(false);

  return (
    <div className="p-6">
      <Button
        variant="primary"
        onClick={() => setShowAlert(true)}
      >
        Show Alert
      </Button>

      {showAlert && (
        <Alert
          variant="success"
          title="Success!"
          description="Component integration is working!"
          onClose={() => setShowAlert(false)}
        />
      )}

      <Modal
        open={showModal}
        onClose={() => setShowModal(false)}
        title="Welcome to Fever Components"
        description="You're all set up!"
      />
    </div>
  );
}

// In your main entry point (App.tsx or index.tsx)
import '../fever-components/src/styles/base.css';
import './your-app-styles.css'; // Your custom styles after

// In individual components that use Fever components
import '../fever-components/src/styles/base.css';
import { Button, Alert } from '../fever-components/src';

// components/fever/FeverButton.tsx
import React from 'react';
import { Button, ButtonProps } from '../../fever-components/src';

interface CustomButtonProps extends ButtonProps {
  loading?: boolean;
  trackingId?: string;
}

export function FeverButton({
  loading,
  trackingId,
  onClick,
  children,
  ...props
}: CustomButtonProps) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // Add your tracking logic
    if (trackingId) {
      analytics.track('button_click', { trackingId });
    }

    if (onClick && !loading) {
      onClick(e);
    }
  };

  return (
    <Button
      {...props}
      onClick={handleClick}
      disabled={loading || props.disabled}
    >
      {loading ? 'Loading...' : children}
    </Button>
  );
}

// types/fever-extensions.d.ts
import { ButtonProps as OriginalButtonProps } from '../fever-components/src';

declare module '../fever-components/src' {
  interface ButtonProps extends OriginalButtonProps {
    trackingId?: string;
    analyticsCategory?: string;
  }
}

// Step 1: Import both libraries
import { Button as OldButton } from 'your-old-library';
import { Button as FeverButton } from '../fever-components/src';

// Step 2: Use component aliases during migration
const Button = process.env.NODE_ENV === 'development'
  ? FeverButton
  : OldButton;

// Step 3: Gradually replace components
function MyComponent() {
  return (
    <div>
      <OldButton>Legacy Button</OldButton>
      <FeverButton variant="primary">New Fever Button</FeverButton>
    </div>
  );
}

// Create a mapping file for easy migration
// migration/component-map.ts
export const ComponentMap = {
  // Map old components to new ones
  'Button': () => import('../fever-components/src').then(m => m.Button),
  'Input': () => import('../fever-components/src').then(m => m.Input),
  'Modal': () => import('../fever-components/src').then(m => m.Modal),
};

// Use in your components
const Button = ComponentMap.Button;

// __tests__/FeverIntegration.test.tsx
import { render, screen } from '@testing-library/react';
import { Button, Alert } from '../fever-components/src';

// Mock CSS imports for testing
jest.mock('../fever-components/src/styles/base.css', () => ({}));

describe('Fever Components Integration', () => {
  test('Button renders correctly', () => {
    render(<Button>Test Button</Button>);
    expect(screen.getByRole('button')).toBeInTheDocument();
  });

  test('Alert displays message', () => {
    render(
      <Alert title="Test Alert" description="Test message" />
    );
    expect(screen.getByText('Test Alert')).toBeInTheDocument();
  });
});

// Access design tokens in your components
import { tokens } from '../fever-components/src';

function CustomComponent() {
  return (
    <div style={{
      color: tokens.colors.primary,
      fontSize: tokens.typography.textSizes.lg,
      padding: tokens.spacing.spacing4
    }}>
      Custom styled with Fever tokens
    </div>
  );
}

// ❌ Missing CSS import
import { Button } from '../fever-components/src';

// ✅ Include CSS import
import '../fever-components/src/styles/base.css';
import { Button } from '../fever-components/src';

// ❌ Missing type imports
const button: ButtonProps = { variant: 'primary' };

// ✅ Import types
import type { ButtonProps } from '../fever-components/src';
const button: ButtonProps = { variant: 'primary' };