# Template: Reusable Component

## Component Name

`{{COMPONENT_NAME}}.tsx`

## Structure

```typescript
// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.tsx
import React from 'react';
import { View, Text, Pressable, type ViewStyle, type TextStyle } from 'react-native';
import type { FC } from 'react';

// Import styles
import { styles } from './{{COMPONENT_NAME}}.styles';

// Import types
import type { {{COMPONENT_NAME}}Props } from './{{COMPONENT_NAME}}.types';

/**
 * {{COMPONENT_NAME}} Component
 *
 * Description: {{DESCRIPTION}}
 *
 * @component
 * @example
 * ```tsx
 * <{{COMPONENT_NAME}}
 *   prop1="value"
 *   prop2={value}
 *   onAction={handleAction}
 * />
 * ```
 */
export const {{COMPONENT_NAME}}: FC<{{COMPONENT_NAME}}Props> = ({
  prop1,
  prop2,
  onAction,
  style,
  children,
}) => {
  // 1. State (if needed)
  const [internalState, setInternalState] = React.useState(false);

  // 2. Handlers
  const handlePress = () => {
    setInternalState(!internalState);
    onAction?.();
  };

  // 3. Render
  return (
    <View style={[styles.container, style]}>
      <Pressable onPress={handlePress} style={styles.button}>
        <Text style={styles.text}>{prop1}</Text>
      </Pressable>
      {children}
    </View>
  );
};

// Default props (if needed)
{{COMPONENT_NAME}}.defaultProps = {
  prop2: 'default value',
};
```

## Types

```typescript
// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.types.ts
import type { ViewStyle } from 'react-native';

export interface {{COMPONENT_NAME}}Props {
  /**
   * Description of prop1
   */
  prop1: string;

  /**
   * Description of prop2
   * @default "default value"
   */
  prop2?: string;

  /**
   * Callback when action occurs
   */
  onAction?: () => void;

  /**
   * Custom style
   */
  style?: ViewStyle;

  /**
   * Children elements
   */
  children?: React.ReactNode;
}
```

## Styles

```typescript
// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.styles.ts
import { StyleSheet } from 'react-native';
import { theme } from '@/theme';

export const styles = StyleSheet.create({
  container: {
    padding: theme.spacing.md,
    backgroundColor: theme.colors.white,
    borderRadius: theme.borderRadius.md,
  },
  button: {
    padding: theme.spacing.sm,
  },
  text: {
    fontSize: theme.typography.fontSize.md,
    color: theme.colors.text.primary,
  },
});
```

## Test

```typescript
// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.test.tsx
import { render, fireEvent } from '@testing-library/react-native';
import { {{COMPONENT_NAME}} } from './{{COMPONENT_NAME}}';

describe('{{COMPONENT_NAME}}', () => {
  it('renders correctly', () => {
    const { getByText } = render(
      <{{COMPONENT_NAME}} prop1="test" onAction={() => {}} />
    );
    expect(getByText('test')).toBeTruthy();
  });

  it('calls onAction when pressed', () => {
    const onAction = jest.fn();
    const { getByText } = render(
      <{{COMPONENT_NAME}} prop1="test" onAction={onAction} />
    );

    fireEvent.press(getByText('test'));

    expect(onAction).toHaveBeenCalledTimes(1);
  });

  it('renders children', () => {
    const { getByText } = render(
      <{{COMPONENT_NAME}} prop1="test" onAction={() => {}}>
        <Text>Child</Text>
      </{{COMPONENT_NAME}}>
    );
    expect(getByText('Child')).toBeTruthy();
  });
});
```

## Index Export

```typescript
// components/{{CATEGORY}}/{{COMPONENT_NAME}}/index.ts
export { {{COMPONENT_NAME}} } from './{{COMPONENT_NAME}}';
export type { {{COMPONENT_NAME}}Props } from './{{COMPONENT_NAME}}.types';
```
