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

interface TripNameInputProps {
  value: string;
  onChange: (value: string) => void;
}

export default function TripNameInput({ value, onChange }: TripNameInputProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();

  const themedStyles = {
    label: { color: colors.text },
    input: {
      backgroundColor: colors.card,
      borderColor: colors.border,
      color: colors.text,
    },
  };

  return (
    <View style={styles.container}>
      <Text style={[styles.label, themedStyles.label]}>
        {t("diary.tripNameLabel")}
      </Text>
      <TextInput
        style={[styles.input, themedStyles.input]}
        value={value}
        onChangeText={onChange}
        placeholder={t("diary.tripNamePlaceholder")}
        placeholderTextColor={colors.textSecondary}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 8,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 16,
    paddingVertical: 12,
    fontSize: 16,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});