package de.sebse.fuplanner2.ui.shared

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import de.sebse.fuplanner2.R
import de.sebse.fuplanner2.ui.theme.AppTheme

@Composable
fun Heading(text: String, onClick: (() -> Unit)? = null) {
    Box(
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(
            text = text,
            style = MaterialTheme.typography.h5,
            color = MaterialTheme.colors.onSurface,
            modifier = Modifier
                .padding(top = dimensionResource(id = R.dimen.header_padding))
        )
        if (onClick != null) Text(
            text = "More >>",
            style = MaterialTheme.typography.subtitle2,
            textDecoration = TextDecoration.Underline,
            color = MaterialTheme.colors.primary,
            modifier = Modifier
                .padding(top = dimensionResource(id = R.dimen.header_padding))
                .align(Alignment.BottomEnd)
                .clickable(onClick = onClick)
        )
    }
}

@Preview
@Composable
fun HeadingPreview() {
    AppTheme {
        Heading("Super cool") { }
    }
}
