🧩 Components Guide

import { Button } from '@/components/Button';

// Variantes disponibles
<Button title="Primary" variant="primary" onPress={handlePress} />
<Button title="Secondary" variant="secondary" onPress={handlePress} />
<Button title="Outline" variant="outline" onPress={handlePress} />
<Button title="Ghost" variant="ghost" onPress={handlePress} />
<Button title="Gradient" variant="gradient" onPress={handlePress} />

// Tamaños
<Button title="Small" size="small" />
<Button title="Medium" size="medium" />
<Button title="Large" size="large" />

// Con icono
<Button 
  title="Add" 
  icon={<Plus size={18} color={Colors.textInverse} />}
  onPress={handlePress}
/>

// Estado de carga
<Button title="Loading" loading={true} />

// Deshabilitado
<Button title="Disabled" disabled={true} />

import { Card } from '@/components/Card';

// Card default
<Card 
  item={item}
  onPress={() => handleItemPress(item.id)}
  onFavorite={() => toggleFavorite(item.id)}
  isFavorite={isFavorite(item.id)}
/>

// Card horizontal (para listas)
<Card 
  item={item}
  variant="horizontal"
  onPress={handlePress}
/>

// Card compacta (para carruseles)
<Card 
  item={item}
  variant="compact"
  onPress={handlePress}
/>

import { Input } from '@/components/Input';

// Input básico
<Input
  label="Email"
  value={email}
  onChangeText={setEmail}
  placeholder="correo@ejemplo.com"
  keyboardType="email-address"
/>

// Con validación
<Input
  label="Contraseña"
  value={password}
  onChangeText={setPassword}
  secureTextEntry
  error={errors.password}
/>

// Con icono
<Input
  label="Buscar"
  value={search}
  onChangeText={setSearch}
  leftIcon={<Search size={20} color={Colors.textTertiary} />}
/>

// Textarea
<Input
  label="Descripción"
  value={description}
  onChangeText={setDescription}
  multiline
  numberOfLines={4}
/>

import { Avatar } from '@/components/Avatar';

// Con imagen
<Avatar 
  source="https://example.com/avatar.jpg"
  name="John Doe"
  size="large"
/>

// Sin imagen (muestra iniciales)
<Avatar 
  name="John Doe"
  size="medium"
/>

// Tamaños disponibles
<Avatar name="JD" size="small" />   // 32px
<Avatar name="JD" size="medium" />  // 48px
<Avatar name="JD" size="large" />   // 64px
<Avatar name="JD" size="xlarge" />  // 96px

// Con borde de estado
<Avatar 
  name="JD" 
  showBorder 
  borderColor={Colors.success}
/>

import { SkeletonLoader } from '@/components/SkeletonLoader';

// Rectángulo
<SkeletonLoader width={200} height={20} />

// Círculo
<SkeletonLoader width={48} height={48} borderRadius={24} />

// Card skeleton
<SkeletonLoader width="100%" height={200} borderRadius={12} />

import { EmptyState } from '@/components/EmptyState';

<EmptyState
  icon="Heart"
  title="No hay favoritos"
  description="Los items que marques como favoritos aparecerán aquí"
  actionTitle="Explorar"
  onAction={() => router.push('/explore')}
/>

import { useToast } from '@/contexts/ToastContext';

const { showToast } = useToast();

// Tipos de toast
showToast('Operación exitosa', 'success');
showToast('Hubo un error', 'error');
showToast('Advertencia', 'warning');
showToast('Información', 'info');

import React from 'react';
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
import { Colors, Spacing, FontSizes, FontWeights, BorderRadius } from '@/constants/colors';

interface MyComponentProps {
  title: string;
  subtitle?: string;
  style?: ViewStyle;
  testID?: string;
}

export function MyComponent({ 
  title, 
  subtitle, 
  style, 
  testID 
}: MyComponentProps) {
  return (
    <View style={[styles.container, style]} testID={testID}>
      <Text style={styles.title}>{title}</Text>
      {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.surface,
    padding: Spacing.md,
    borderRadius: BorderRadius.md,
  },
  title: {
    fontSize: FontSizes.lg,
    fontWeight: FontWeights.semibold,
    color: Colors.text,
  },
  subtitle: {
    fontSize: FontSizes.sm,
    color: Colors.textSecondary,
    marginTop: Spacing.xs,
  },
});