import React from "react";
import { Image, StyleSheet, Text, View } from "react-native";
import { images } from "../../../../assets";
import { pxTransform } from "../../../../../../utils";
import type { BookLocation } from "../../../../../../typings/book";

export default function CardHeader({
    location
}: {
    location?: BookLocation
}) {
    return <View style={style.main}>
        <View style={style.location_box}>
            <Image source={images.location} style={style.location_icon} />
        </View>
        <View style={style.info_box}>
            <View style={style.address_box}>
                <Text style={style.class_text}>
                    {location?.area}
                </Text>
                <Text style={style.area_text}>
                    {location?.class}
                </Text>
            </View>
            <View style={style.address_box}>
                <Text style={style.address_text}>
                    {`${location?.shelf ? `${location?.shelf}架` : ''}   ${location?.direct ? `${location?.direct}面` : ''}   ${location?.column ? `${location?.column}列` : ''}   ${location?.layer ? `${location?.layer}层` : ''}`}
                </Text>
            </View>
        </View>
    </View>
}

const style = StyleSheet.create({
    main: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: pxTransform(7),
        width: pxTransform(254),
        height: pxTransform(82),
        borderRadius: pxTransform(20),
        backgroundColor: `rgba(188,214,244,0.3)`
    },
    location_box: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        width: pxTransform(45),
        height: pxTransform(45),
        marginLeft: pxTransform(15),
        borderRadius: pxTransform(45),
        backgroundColor: `rgba(105,157,223,0.23)`
    },
    location_icon: {
        width: pxTransform(22.33),
        height: pxTransform(21.26)
    },
    info_box: {
        display: 'flex',
        flexDirection: 'column',
        marginLeft: pxTransform(10)
    },
    address_box: {
        width: pxTransform(173),
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    class_text: {
        color: `#699DDF`,
        fontSize: pxTransform(20),
        fontWeight: 'bold'
    },
    area_text: {
        color: `#696868`,
        fontSize: pxTransform(18),
        fontWeight: '400'
    },
    address_text: {
        color: `#696868`,
        fontSize: pxTransform(18),
        fontWeight: '400'
    },
})