import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Label } from './label';
import React from 'react';

describe('Label', () => {
  it('renders correctly with default props', () => {
    render(<Label htmlFor="test">Test Label</Label>);
    const label = screen.getByText('Test Label');
    expect(label).toBeInTheDocument();
    expect(label).toHaveClass('text-sm'); // md size
  });

  it('renders correctly with different sizes', () => {
    const { rerender } = render(<Label size="sm">Small</Label>);
    expect(screen.getByText('Small')).toHaveClass('text-xs');

    rerender(<Label size="md">Medium</Label>);
    expect(screen.getByText('Medium')).toHaveClass('text-sm');

    rerender(<Label size="lg">Large</Label>);
    expect(screen.getByText('Large')).toHaveClass('text-base');
  });

  it('is associated with the correct input', () => {
    render(
      <>
        <Label htmlFor="input-id">Label Text</Label>
        <input id="input-id" />
      </>
    );
    const label = screen.getByText('Label Text');
    expect(label).toHaveAttribute('for', 'input-id');
  });

  it('has correct data-slot attribute', () => {
    const { container } = render(<Label>Label</Label>);
    expect(container.querySelector('[data-slot="label"]')).toBeInTheDocument();
  });

  it('applies custom classNames', () => {
    const { container } = render(<Label className="custom-label">Label</Label>);
    expect(container.firstChild).toHaveClass('custom-label');
  });
});