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

export default function BookItem({
    index = 1,
    dataSource
}: {
    index: number,
    dataSource?: Book
}) {
    return <View style={style.main}>
        <Image
            source={images.bookcard_background}
            style={style.background}
            resizeMode="stretch"
        />
        <CardHeader location={dataSource?.location} />
        <BookCard index={index} dataSource={dataSource} />
        <View style={style.tips}>
            <Text style={style.tips_text}>
                已放入书架
            </Text>
        </View>
    </View>
}

const style = StyleSheet.create({
    main: {
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        marginRight: pxTransform(28),
        width: pxTransform(270),
        height: pxTransform(436.09),
        borderRadius: pxTransform(20),
        backgroundColor: "#7DE88E"
    },
    background: {
        position: 'absolute',
        width: pxTransform(270),
        height: pxTransform(404),
        top: 0,
        left: 0
    },
    tips: {
        marginTop: pxTransform(31)
    },
    tips_text: {
        fontSize: pxTransform(21),
        color: `#FFF`
    }
})