import {FlatList, TouchableOpacity,Text, View} from "react-native";
import {useState} from "react";
import dayjs from "dayjs";

export default function CalendarComponent() {
    const [selectedDay] = useState(dayjs().date());

    const days = Array.from({ length: 7 }, (_, index) => {
        const day = dayjs().add(index, "day");
        return {
            id: day.date(),
            label: day.format("ddd"),
        };
    });

    return (
        <View className="bg-transparent">
            <FlatList
                horizontal
                data={days}
                keyExtractor={(item) => item.id.toString()}
                showsHorizontalScrollIndicator={false}
                contentContainerStyle={{ gap: 12 }} // Espacement entre les items
                renderItem={({ item }) => (
                    <TouchableOpacity
                        className={`w-16 h-20 flex items-center justify-center rounded-xl ${
                            selectedDay === item.id
                                ? "bg-orange-500 border-2 border-orange-300"
                                : "bg-black"
                        }`}
                    >
                        <Text
                            className={`text-sm ${
                                selectedDay === item.id ? "text-white" : "text-gray-400"
                            }`}
                        >
                            {item.label}
                        </Text>
                        <Text
                            className={`text-lg font-bold ${
                                selectedDay === item.id ? "text-white" : "text-gray-200"
                            }`}
                        >
                            {item.id}
                        </Text>
                    </TouchableOpacity>
                )}
            />
        </View>
    );
}