import React from 'react';
import { render } from '@testing-library/react-native';
import {
  Skeleton,
  SkeletonText,
  SkeletonAvatar,
  SkeletonCard,
  SkeletonListItem,
  SkeletonBeneficiaryCard,
  SkeletonSensorCard,
} from '@/components/ui/Skeleton';

describe('Skeleton', () => {
  it('renders with default props', () => {
    const { toJSON } = render(<Skeleton />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom width and height', () => {
    const { toJSON } = render(<Skeleton width={100} height={50} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom border radius', () => {
    const { toJSON } = render(<Skeleton borderRadius={20} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with percentage width', () => {
    const { toJSON } = render(<Skeleton width="80%" />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });
});

describe('SkeletonText', () => {
  it('renders single line by default', () => {
    const { toJSON } = render(<SkeletonText />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders multiple lines', () => {
    const { toJSON } = render(<SkeletonText lines={3} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom line height', () => {
    const { toJSON } = render(<SkeletonText lineHeight={20} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom last line width', () => {
    const { toJSON } = render(<SkeletonText lines={2} lastLineWidth="50%" />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });
});

describe('SkeletonAvatar', () => {
  it('renders with default size', () => {
    const { toJSON } = render(<SkeletonAvatar />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom size', () => {
    const { toJSON } = render(<SkeletonAvatar size={64} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });
});

describe('SkeletonCard', () => {
  it('renders with default height', () => {
    const { toJSON } = render(<SkeletonCard />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom height', () => {
    const { toJSON } = render(<SkeletonCard height={200} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });
});

describe('SkeletonListItem', () => {
  it('renders with default props', () => {
    const { toJSON } = render(<SkeletonListItem />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom avatar size', () => {
    const { toJSON } = render(<SkeletonListItem avatarSize={64} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });

  it('renders with custom number of lines', () => {
    const { toJSON } = render(<SkeletonListItem lines={3} />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });
});

describe('SkeletonBeneficiaryCard', () => {
  it('renders beneficiary card skeleton', () => {
    const { toJSON } = render(<SkeletonBeneficiaryCard />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });
});

describe('SkeletonSensorCard', () => {
  it('renders sensor card skeleton', () => {
    const { toJSON } = render(<SkeletonSensorCard />);
    const tree = toJSON();
    expect(tree).toBeTruthy();
  });
});