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

vi.mock('@tamagui/core', () => ({
  useTheme: () => ({
    color12: { val: '#111827' },
    color: { val: '#111827' },
    gray11: { val: '#6b7280' },
    gray6: { val: '#e5e7eb' },
    gray2: { val: '#f8fafc' },
    blue3: { val: '#dbeafe' },
    primary: { val: '#2563eb' },
  }),
}));

vi.mock('@tamagui/stacks', () => ({
  YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
  XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
}));

vi.mock('@tamagui/text', () => ({
  SizableText: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
}));

vi.mock('@tamagui/react-native-web-lite', () => ({
  Pressable: ({ children, ...props }: { children: React.ReactNode }) => <button {...props}>{children}</button>,
}));

import { MobileInstallBanner } from './MobileInstallBanner';

describe('MobileInstallBanner', () => {
  it('renders install action for prompt variant', () => {
    render(
      <MobileInstallBanner
        state={{ variant: 'prompt' }}
        density="compact"
        onInstall={() => {}}
        onDismiss={() => {}}
      />,
    );

    expect(screen.getByText('installBanner.title')).toBeInTheDocument();
    expect(screen.getByText('installBanner.action')).toBeInTheDocument();
    expect(screen.getByLabelText('actions.dismiss')).toBeInTheDocument();
  });

  it('renders iOS hint without install action', () => {
    render(
      <MobileInstallBanner
        state={{ variant: 'ios' }}
        density="default"
        onDismiss={() => {}}
      />,
    );

    expect(screen.getByText('installBanner.iosHint')).toBeInTheDocument();
    expect(screen.queryByText('installBanner.action')).toBeNull();
  });
});