commonMain.dependencies {
    implementation("com.pixamob:pixacompose:1.1.0")
}

dependencies {
    implementation("com.pixamob:pixacompose:1.1.0")
}

import androidx.compose.runtime.*
import com.pixamob.pixacompose.components.inputs.*
import com.pixamob.pixacompose.components.display.*
import com.pixamob.pixacompose.theme.AppTheme

@Composable
fun MyApp() {
    AppTheme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(Spacing.Medium),
            verticalArrangement = Arrangement.spacedBy(Spacing.Medium)
        ) {
            // Card Components
            InfoCard(
                title = "Welcome to PixaCompose",
                description = "Build beautiful UIs with ready-to-use components",
                icon = Icons.Default.Info
            )
            
            // Text Input
            var text by remember { mutableStateOf("") }
            OutlinedTextField(
                value = text,
                onValueChange = { text = it },
                label = "Email",
                placeholder = "Enter your email"
            )
            
            // Action Button
            PrimaryButton(
                text = "Get Started",
                onClick = { /* Handle click */ }
            )
        }
    }
}

InfoCard(
    title = "Welcome",
    description = "Get started with PixaCompose",
    icon = Icons.Default.Info,
    variant = BaseCardVariant.Elevated
)

ActionCard(
    title = "Settings",
    description = "Manage your preferences",
    icon = Icons.Default.Settings,
    trailingIcon = Icons.Default.ChevronRight,
    onClick = { /* navigate */ }
)

// With remote icon (perfect for profile settings)
SelectCard(
    title = "7-8 hours",
    description = "Recommended sleep",
    iconUrl = "https://example.com/sleep-icon.png",
    isSelected = selected == 0,
    onClick = { selected = 0 }
)

// With vector icon
SelectCard(
    title = "Dark Mode",
    icon = Icons.Default.DarkMode,
    isSelected = selected == 1,
    onClick = { selected = 1 }
)

// Icon only mode
SelectCard(
    icon = Icons.Default.Favorite,
    isSelected = isLiked,
    onClick = { isLiked = !isLiked }
)

MediaCard(
    imageUrl = "https://example.com/image.jpg",
    title = "Article Title",
    subtitle = "Category",
    description = "Article preview text",
    onClick = { /* open article */ }
)

Row(horizontalArrangement = Arrangement.spacedBy(Spacing.Medium)) {
    StatCard(
        modifier = Modifier.weight(1f),
        value = "42",
        label = "Active",
        trend = "+12%",
        trendPositive = true
    )
    
    StatCard(
        modifier = Modifier.weight(1f),
        value = "85%",
        label = "Success Rate"
    )
}

ListItemCard(
    title = "Notifications",
    subtitle = "Push, Email, SMS",
    leadingIcon = Icons.Default.Notifications,
    trailingIcon = Icons.Default.ChevronRight,
    onClick = { /* navigate */ }
)

FeatureCard(
    title = "Fast Setup",
    description = "Get started in minutes",
    icon = Icons.Default.Speed,
    iconBackgroundColor = AppTheme.colors.brandSurfaceSubtle
)

Row(horizontalArrangement = Arrangement.spacedBy(Spacing.Small)) {
    CompactCard(title = "Health", icon = Icons.Default.FavoriteBorder)
    CompactCard(title = "Fitness", icon = Icons.Default.FitnessCenter)
}

SummaryCard(
    title = "Weekly Summary",
    icon = Icons.Default.CalendarMonth,
    items = listOf(
        "Total" to "12",
        "Completed" to "10",
        "Success Rate" to "83%"
    )
)

variant = BaseCardVariant.Elevated    // Shadow (default for info)
variant = BaseCardVariant.Outlined    // Border only
variant = BaseCardVariant.Filled      // Solid background
variant = BaseCardVariant.Ghost       // Subtle (default for list items)

padding = BaseCardPadding.Compact     // 8dp
padding = BaseCardPadding.Small       // 12dp  
padding = BaseCardPadding.Medium      // 16dp (default)
padding = BaseCardPadding.Large       // 24dp

InfoCard(
    title = "Custom",
    backgroundColor = Color.Blue,      // Optional override
    variant = BaseCardVariant.Filled
)

@Composable
fun App() {
    AppTheme(
        isDarkTheme = isSystemInDarkTheme()
    ) {
        // Your app content
        MyScreen()
    }
}

@Composable
fun App() {
    val customFont = FontFamily(/* your font */)
    
    AppTheme(
        customFontFamily = customFont
    ) {
        // Your app content with custom font
    }
}

@Composable
fun MyComponent() {
    // Colors
    val brandColor = AppTheme.colors.brandContentDefault
    val backgroundColor = AppTheme.colors.baseSurfaceDefault
    
    // Typography
    val titleStyle = AppTheme.typography.titleBold
    val bodyStyle = AppTheme.typography.bodyRegular
    
    // Spacing
    val padding = Spacing.Medium
    val gap = Spacing.Small
}

InfoCard(
    title = "Loading...",
    isLoading = true  // Shows skeleton loader
)

PixaImage(
    source = PixaImageSource.Url(imageUrl),
    contentDescription = "Image",
    isLoading = isImageLoading
)

// Vector icon
PixaIcon(
    source = IconSource.Vector(Icons.Default.Home),
    contentDescription = "Home",
    size = IconSize.Large,
    tint = AppTheme.colors.brandContentDefault
)

// Remote URL icon
PixaIcon(
    source = IconSource.Url("https://example.com/icon.png"),
    contentDescription = "Logo",
    size = 48.dp
)

// Painter icon
PixaIcon(
    source = IconSource.Resource(painterResource(R.drawable.logo)),
    contentDescription = "App Logo"
)

PixaImage(
    source = PixaImageSource.Url("https://example.com/image.jpg"),
    contentDescription = "Product Image",
    modifier = Modifier.size(200.dp),
    contentScale = ContentScale.Crop,
    shape = RoundedCornerShape(12.dp),
    enableCrossfade = true,
    placeholder = painterResource(R.drawable.placeholder),
    error = painterResource(R.drawable.error)
)

@Composable
fun DashboardScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(Spacing.Medium),
        verticalArrangement = Arrangement.spacedBy(Spacing.Medium)
    ) {
        // Stats Row
        Row(horizontalArrangement = Arrangement.spacedBy(Spacing.Medium)) {
            StatCard(
                modifier = Modifier.weight(1f),
                value = "42",
                label = "Total",
                icon = Icons.Default.CheckCircle
            )
            StatCard(
                modifier = Modifier.weight(1f),
                value = "85%",
                label = "Success",
                trend = "+5%",
                trendPositive = true
            )
        }
        
        // Info Card
        InfoCard(
            title = "New Features",
            description = "Check out the latest updates",
            icon = Icons.Default.Info
        )
        
        // Action Card
        ActionCard(
            title = "Settings",
            description = "Manage preferences",
            icon = Icons.Default.Settings,
            trailingIcon = Icons.Default.ChevronRight,
            onClick = { /* navigate */ }
        )
    }
}

@Composable
fun SettingsScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(Spacing.Tiny)
    ) {
        ListItemCard(
            title = "Profile",
            subtitle = "Manage your account",
            leadingIcon = Icons.Default.Person,
            trailingIcon = Icons.Default.ChevronRight,
            onClick = { }
        )
        
        ListItemCard(
            title = "Notifications",
            subtitle = "Push, Email, SMS",
            leadingIcon = Icons.Default.Notifications,
            trailingIcon = Icons.Default.ChevronRight,
            onClick = { }
        )
        
        ListItemCard(
            title = "Privacy",
            subtitle = "Data and security",
            leadingIcon = Icons.Default.Lock,
            trailingIcon = Icons.Default.ChevronRight,
            onClick = { }
        )
    }
}