import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { GradientFlow } from './gradient-flow';

jest.mock('framer-motion', () => ({
  motion: {
    div: ({ className }: { className?: string }) => <div className={className} data-testid="gradient-flow" />,
  },
}));

describe('GradientFlow', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Rendering', () => {
    it('should render gradient flow component', () => {
      const { getByTestId } = render(<GradientFlow />);
      const component = getByTestId('gradient-flow');
      expect(component).toBeInTheDocument();
    });

    it('should apply custom className', () => {
      const { getByTestId } = render(<GradientFlow className="custom-class" />);
      const component = getByTestId('gradient-flow');
      expect(component).toHaveClass('custom-class');
    });
  });

  describe('Props', () => {
    it('should accept custom colors', () => {
      const { getByTestId } = render(
        <GradientFlow colors={['#ff0000', '#00ff00', '#0000ff']} />
      );
      const component = getByTestId('gradient-flow');
      expect(component).toBeInTheDocument();
    });

    it('should accept custom duration', () => {
      const { getByTestId } = render(<GradientFlow duration={20} />);
      const component = getByTestId('gradient-flow');
      expect(component).toBeInTheDocument();
    });
  });
});