// src/styles/globalStyles.ts
import { StyleSheet, Dimensions } from 'react-native';
var winWidth = Dimensions.get("window").width;
const itemWidth = (winWidth - 40) / 4;

export const globalStyles = StyleSheet.create({
    boxProductReviewTop: {
        backgroundColor: '#fff',
        paddingLeft: 10,
        paddingRight: 10,
        marginTop: 25,
    },
    textBoxProductReviewTop: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#0d0d9c',
        marginBottom: 8,
        textTransform: 'uppercase',
        textAlign: 'center',
    },
    noteTextReviewTop: {
        marginBottom: 8,
        textAlign: 'center',
        fontSize: 12,
        color: "#000"
    },
    listTab: {
        flexDirection: 'row',
    },
    tabItem: {
        padding: 10,
        width: 100,
        marginRight: 10,
        textAlign: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
        backgroundColor: '#ececec',
        borderRadius: 4,
    },
    textTabItem: {
        fontSize: 15,
    },
    activeItem: {
        backgroundColor: '#462f91',
    },
    activeText: {
        color: '#fff'
    },
    listProduct: {
        marginTop: 10,
        marginBottom: 10,
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 10
    },
    moreAll: {
        width: 110,
        height: 30,
        borderColor: '#FF7A00',
        borderWidth: 1,
        borderRadius: 20,
        textAlign: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        lineHeight: 28,
        marginLeft: 'auto',
        marginRight: 'auto',
        color: '#FF7A00',
        fontWeight: 'bold',
    },
    boxCategoryHome: {
        marginTop: 25,
    },
    textBoxCategoryHome: {
        fontSize: 20,
        fontWeight: "bold",
        color: "#0d0d9c",
        marginBottom: 8,
        textTransform: "uppercase",
        textAlign: "center",
    },
    listCategoryBox: {
        marginTop: 10,
        padding: 10,
        height: 300
    },
    categoryItem: {
        width: '25%',
        marginBottom: 25
    },
    boxImageCategory: {
        width: 70,
        height: 70,
        borderRadius: "50%",
        overflow: 'hidden',
        backgroundColor: '#f4f0ff',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    iconCategory: {
        width: 50,
        objectFit: 'contain',
    },
    categoryName: {
        fontSize: 15,
        fontWeight: '500',
        marginTop: 5,
        textAlign: 'center',
    },
    dot: {
        backgroundColor: 'rgba(0,0,0,.2)',
        width: 8,
        height: 8,
        borderRadius: 4,
        margin: 3,
    },
    activeDot: {
        backgroundColor: '#ff7a00',
        width: 40,
        height: 10,
        borderRadius: 5,
        margin: 3,
    },
    BoxBusiness: {
        marginTop: 25,
    },
    textBoxBusiness: {
        fontSize: 20,
        fontWeight: "bold",
        color: "#0d0d9c",
        marginBottom: 8,
        textTransform: "uppercase",
        textAlign: "center",
    },
    sliderBusinesses: {
        marginTop: 20,
        height: 85
    },
    logoItem: {
        width: itemWidth,
        height: 40,
        borderRadius: 8,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 10,
        shadowColor: '#727272',
        shadowOffset: { width: 1, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 4,
    },
    logoImage: {
        width: 80,
        height: 30,
        resizeMode: 'contain',
    },
    BoxProductSaveHome: {
        marginTop: 20,
        width: winWidth,
        paddingLeft: 10,
        paddingRight: 10,
    },
    textBoxProductSaveHome: {
        fontSize: 20,
        fontWeight: "bold",
        color: "#0d0d9c",
        marginBottom: 8,
        textTransform: "uppercase",
        textAlign: "center",
    },
    BoxArticleBranch: {
        width: winWidth,
        marginTop: 25
    },
    textBoxArticleBranche: {
        fontSize: 20,
        fontWeight: "bold",
        color: "#111189ff",
        marginBottom: 8,
        textTransform: "uppercase",
        textAlign: "center",
    },
    boxFlex: {
        alignItems: "center",
        flexDirection: 'row',
        justifyContent: 'center',
        margin: 'auto',
    },
    boxListArticle: {
        marginTop: 5,
        paddingLeft: 10,
        paddingRight: 10,
    },
    flex: {
        alignItems: "center",
        flexDirection: 'row',
    },
    itemArtTime: {
        alignItems: "center",
        flexDirection: 'row',
    },
    itemArticle: {
        flexDirection: 'row',
        marginBottom: 15,
        paddingBottom: 15,
        borderBottomWidth: 1,
        borderColor: '#efefef'
    },
    itemArticleImg: {
        width: 90,
        height: 90,
        marginRight: 10,
    },
    imgArticle: {
        width: '100%',
        height: "100%",
        objectFit: 'cover',
    },
    infoArticle: {
        width: winWidth - 120
    },
    itemArtName: {
        fontSize: 15,
        fontWeight: 700,
        marginBottom: 3,
    },
    itemArtSummary: {
        fontSize: 13,
        color: '#161616',
    },
    itemArtDate: {
        fontSize: 13,
        marginLeft: 3
    },
    itemArtSource: {
        fontSize: 12,
        marginLeft: 3
    },
    btnMore: {
        margin: 'auto',
        width: 90,
        height: 28,
        lineHeight: 28,
        textAlign: 'center',
        borderWidth: 1,
        borderColor: '#ff7a00',
        borderRadius: 4,
        color: '#ff7a00',
        fontSize: 13,
        fontWeight: 700
    },
    itemArtlocal: {
        flexDirection: 'row',
        alignItems: "center"
    },
    textArtlocal: {
        marginLeft: 3,
        fontSize: 13,
        paddingBottom: 2
    },
    itemArtUploadtime: {
        flexDirection: 'row',
        alignItems: "center",
        marginBottom: 3
    },
    itemArtUser: {
        flexDirection: 'row',
        alignItems: "center",
    },
    imgAvatar: {
        width: 20,
        height: 20,
        objectFit: 'contain',
        marginRight: 3
    },
    itemArtNameUser: {
        fontWeight: "bold",
    },
    itemArtPrice: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#d80a00',
    },
    BoxBannerSaleHome: {
        margin: 10,
        marginTop: 30,
    },
    imgBannerSale: {
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        borderRadius: 12
    },
    sliderBannerSale: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 200
    },
    itemBannerSale: {
        width: winWidth - 50,
        height: 160,
        objectFit: 'cover',
        marginRight: 10
    },
    BoxPromotionHome: {
        marginTop: 20
    },
    touchArea: {
        width: winWidth,
        height: 200,
        position: 'relative',
        overflow: 'hidden',
        borderRadius: 12
    },
    imageYoutobe: {
        width: winWidth - 20,
        height: 200,
        objectFit: 'cover',
        overflow: 'hidden',
        borderRadius: 12
    },
    boxVideo: {
        width: winWidth - 20,
        height: 200,
    },
    containerVideo: {
        paddingLeft: 10,
        paddingRight: 10
    },
    iconPlay: {
        position: 'absolute',
        left: winWidth / 2 - 20,
        top: 90,
        zIndex: 10,
    },
    infoVideo: {
        position: 'absolute',
        bottom: 0,
        padding: 12,
        zIndex: 10,
        borderBottomLeftRadius: 16,
        borderBottomRightRadius: 16,
    },
    listEvenBanner: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
        marginRight: -10
    },
    itemEven: {
        width: winWidth / 2 - 20,
        height: 100,
        marginRight: 10,
        marginBottom: 10
    },
    overlay: {
        position: 'absolute',
        bottom: 0,
        height: '100%',
        width: winWidth - 20,
        backgroundColor: 'rgba(0,0,0,0.4)',
        zIndex: 1,
        borderRadius: 20
    },
    imgEven: {
        width: '100%',
        height: 100,
        objectFit: 'cover',
        borderRadius: 8
    },
    breadcrumb: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 10,
    },
    breadcrumbItem: {
        flexDirection: "row",
        alignItems: "center",
        marginRight: 6,
    },
    breadcrumbText: {
        marginLeft: 4,
        color: "#637381",
        fontSize: 14,
    },
});