PillGroupItem

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconPosition
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.PillGroup
import net.ikea.skapa.ui.components.PillGroupItem
import net.ikea.skapa.ui.components.PillGroupState

fun main() { 
   //sampleStart 
   SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    val items = listOf(
        PillGroupItem(null, "Functionality", true),
        PillGroupItem(null, "John Doe", painterResource(R.drawable.ic_image_fallback_image), true),
        PillGroupItem(null, "Pet-friendly", R.drawable.ic_image_fallback_image, iconPosition = IconPosition.Horizontal.Trailing),
        PillGroupItem(null, "Accessibility"),
        PillGroupItem(null, "Design", R.drawable.ic_image_fallback_image)
    ).toMutableStateList()

    var pillGroupState by remember { mutableStateOf(PillGroupState.Collapsed) }
    val maxVisibleItems = 3

    Column {
        PillGroup(
            items = items,
            maxVisibleItems = maxVisibleItems,
            // Provide localized text for the show more button
            expandedButtonLabel = "${items.size - maxVisibleItems} more...",
            state = pillGroupState,
            onStateChanged = { newState ->
                // Do something when state change
                pillGroupState = newState
            },
            onClickItem = { index, item ->
                // Do something Item Click
                items[index] = item.deepCopy(selected = !item.selected)
            }
        )
        // Offer a way back to the collapsed state
        if (pillGroupState == PillGroupState.Expanded) {
            Button(label = "Collapse") { pillGroupState = PillGroupState.Collapsed }
        }
    }
} 
   //sampleEnd
}