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

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>
  );
}