import { Ionicons } from "@expo/vector-icons";
import { useCallback } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
import { IoniconsType } from "../../lib/types";
import { TabButton } from "./TabButton";

export type TabSectionItem = {
  onPress: () => void;
  icon: IoniconsType;
  title: string;
};
export type TabSectionColor = { bg: string; text: string };

const COLORS: TabSectionColor[] = [
  { bg: "bg-blue-500", text: "text-blue-600" },
  { bg: "bg-emerald-500", text: "text-emerald-600" },
  { bg: "bg-violet-500", text: "text-violet-600" },
  { bg: "bg-amber-500", text: "text-amber-600" },
  { bg: "bg-rose-500", text: "text-rose-600" },
  { bg: "bg-slate-500", text: "text-slate-600" },
];

export function TabSection({
  itemHeight = 150,
  items,
  colors = COLORS,
}: {
  itemHeight?: number;
  items: TabSectionItem[];
  colors?: TabSectionColor[];
}) {
  const renderGridItem = useCallback(
    ({ item, index }: { item: TabSectionItem; index: number }) => (
      <TabButton
        style={{ height: itemHeight, minHeight: 150, flex: 1 }}
        onPress={item.onPress}
      >
        <View
          className={`mb-3 h-20 w-20 items-center justify-center rounded-full ${colors[index % colors.length].bg}`}
        >
          <Ionicons name={item.icon} color="#ffffff" size={32} />
        </View>
        <Text
          className={`text-md text-center font-bold ${colors[index % colors.length].text}`}
        >
          {item.title}
        </Text>
      </TabButton>
    ),
    []
  );
  return (
    <FlatList
      data={items}
      numColumns={2}
      renderItem={renderGridItem}
      keyExtractor={(item) => item.title}
      columnWrapperStyle={styles.columnWrapper}
      contentContainerStyle={styles.contentContainer}
    />
  );
}
const styles = StyleSheet.create({
  columnWrapper: {
    gap: 16,
    paddingHorizontal: 16,
  },
  contentContainer: {
    gap: 16,
    paddingVertical: 16,
  },
});