Components

import { TouchableOpacity, StyleSheet } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { useThemeColor } from '@/hooks/use-theme-color';

type ButtonProps = {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary';
};

export function CustomButton({ title, onPress, variant = 'primary' }: ButtonProps) {
  const tintColor = useThemeColor({}, 'tint');
  const backgroundColor = variant === 'primary' ? tintColor : 'transparent';
  const textColor = variant === 'primary' ? '#fff' : tintColor;

  return (
    <TouchableOpacity onPress={onPress}>
      <ThemedView
        style={[
          styles.button,
          { backgroundColor },
          variant === 'secondary' && styles.outlined
        ]}
      >
        <ThemedText
          style={[styles.text, { color: textColor }]}
          type="defaultSemiBold"
        >
          {title}
        </ThemedText>
      </ThemedView>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: 'center',
  },
  outlined: {
    borderWidth: 2,
    borderColor: 'currentColor',
  },
  text: {
    fontSize: 16,
  },
});

import { PropsWithChildren } from 'react';
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
import { StyleSheet } from 'react-native';

function Card({ children }: PropsWithChildren) {
  return (
    <ThemedView
      lightColor="#ffffff"
      darkColor="#1f2937"
      style={styles.card}
    >
      {children}
    </ThemedView>
  );
}

function CardHeader({ children }: PropsWithChildren) {
  return (
    <ThemedView style={styles.header}>
      {children}
    </ThemedView>
  );
}

function CardTitle({ children }: PropsWithChildren) {
  return <ThemedText type="subtitle">{children}</ThemedText>;
}

function CardContent({ children }: PropsWithChildren) {
  return <ThemedView style={styles.content}>{children}</ThemedView>;
}

Card.Header = CardHeader;
Card.Title = CardTitle;
Card.Content = CardContent;

export { Card };

// Usage:
<Card>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Content>
    <ThemedText>Content</ThemedText>
  </Card.Content>
</Card>

type ListProps<T> = {
  data: T[];
  renderItem: (item: T, index: number) => ReactNode;
  emptyMessage?: string;
};

export function List<T>({ data, renderItem, emptyMessage }: ListProps<T>) {
  if (data.length === 0) {
    return (
      <ThemedView style={styles.empty}>
        <ThemedText>{emptyMessage ?? 'No items'}</ThemedText>
      </ThemedView>
    );
  }

  return (
    <ThemedView>
      {data.map((item, index) => (
        <ThemedView key={index}>
          {renderItem(item, index)}
        </ThemedView>
      ))}
    </ThemedView>
  );
}

// Usage:
<List
  data={users}
  renderItem={(user) => (
    <ThemedText>{user.name}</ThemedText>
  )}
  emptyMessage="No users found"
/>

import { render } from '@testing-library/react-native';
import { ThemedText } from '@/components/themed-text';

describe('ThemedText', () => {
  it('renders with default type', () => {
    const { getByText } = render(
      <ThemedText>Hello</ThemedText>
    );
    expect(getByText('Hello')).toBeTruthy();
  });

  it('applies title styles', () => {
    const { getByText } = render(
      <ThemedText type="title">Title</ThemedText>
    );
    const element = getByText('Title');
    expect(element.props.style).toMatchObject({
      fontSize: 32,
      fontWeight: 'bold',
    });
  });
});