import React from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Platform,
} from "react-native";
import { useThemeContext } from "@/hooks/use-theme-context";
import { useI18n } from "@/hooks/use-i18n";
import CrewCard from "./CrewCard";

interface CrewListProps {
  crews: Model.TripCrews[];
  onEdit?: (crew: Model.TripCrews) => void;
  onDelete?: (crew: Model.TripCrews) => void;
}

export default function CrewList({ crews, onEdit, onDelete }: CrewListProps) {
  const { colors } = useThemeContext();
  const { t } = useI18n();

  const renderItem = ({ item }: { item: Model.TripCrews }) => (
    <CrewCard crew={item} onEdit={onEdit} onDelete={onDelete} />
  );

  const keyExtractor = (item: Model.TripCrews, index: number) => 
    `${item.PersonalID}-${index}`;

  const renderEmpty = () => (
    <View style={styles.emptyContainer}>
      <Text style={[styles.emptyText, { color: colors.textSecondary }]}>
        {t("diary.crew.noCrewMembers")}
      </Text>
    </View>
  );

  return (
    <FlatList
      data={crews}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      ListEmptyComponent={renderEmpty}
      showsVerticalScrollIndicator={false}
      contentContainerStyle={styles.listContent}
    />
  );
}

const styles = StyleSheet.create({
  listContent: {
    paddingBottom: 20,
    flexGrow: 1,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 60,
  },
  emptyText: {
    fontSize: 16,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});