import React from 'react';
import { View, Text, TouchableOpacity, SafeAreaView } from 'react-native';
import { useRouter } from 'expo-router';

export default function ModalScreen() {
  const router = useRouter();

  return (
    <SafeAreaView className="flex-1 bg-slate-950 items-center justify-center p-6">
      <View className="bg-slate-900 border border-slate-800 rounded-3xl p-6 w-full max-w-sm gap-4">
        <Text className="text-lg font-black text-white uppercase tracking-wider">
          Đính kèm Đa phương tiện
        </Text>
        <Text className="text-xs text-slate-400">
          Chụp ảnh hoặc chọn hình ảnh để lưu giữ mốc kỷ niệm trên lộ trình của bạn.
        </Text>

        <View className="gap-2.5 mt-2">
          <TouchableOpacity
            onPress={() => router.back()}
            className="w-full bg-indigo-600 py-3.5 rounded-xl items-center justify-center"
          >
            <Text className="text-white font-bold text-xs">MỞ MÁY ẢNH</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => router.back()}
            className="w-full bg-slate-800 py-3.5 rounded-xl items-center justify-center"
          >
            <Text className="text-white font-bold text-xs">THƯ VIỆN ẢNH</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => router.back()}
            className="w-full py-2.5 items-center justify-center"
          >
            <Text className="text-slate-500 font-bold text-xs">ĐÓNG</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
}
