import React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import * as Haptics from 'expo-haptics';

export type TabId = 'recipes' | 'favorites' | 'iq' | 'wb' | 'filters' | 'frame';

interface ToolRailProps {
  activeTab: TabId | null;
  onToggle: (tab: TabId) => void;
}

const TOOLS: { id: TabId; label: string }[] = [
  { id: 'recipes', label: 'PRESETS' },
  { id: 'favorites', label: 'FAVORITED' },
  { id: 'iq', label: 'LIGHT' },
  { id: 'wb', label: 'WB' },
  { id: 'filters', label: 'FX' },
  { id: 'frame', label: 'FRAME' },
];

export default function ToolRail({ activeTab, onToggle }: ToolRailProps) {
  // FRAME is on in BOTH modes: the camera composes through the frame's window
  // WYSIWYG (and WATERMARK now lives inside this tab).
  const tools = TOOLS;
  return (
    <View className="py-1.5">
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
      >
        {tools.map((tool) => {
          const isActive = activeTab === tool.id;
          return (
            <TouchableOpacity
              key={tool.id}
              onPress={() => {
                onToggle(tool.id);
                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
              }}
              className={`mx-1 flex-row items-center rounded-full border px-3 py-2 ${
                isActive
                  ? 'border-amber-500/70 bg-amber-500/15'
                  : 'border-zinc-700/60 bg-black/40'
              }`}
              activeOpacity={0.7}
            >
              <Text
                className={`font-mono font-bold tracking-widest ${
                  isActive ? 'text-[13px] text-amber-300' : 'text-[10px] text-zinc-500'
                }`}
              >
                {tool.label}
              </Text>
            </TouchableOpacity>
          );
        })}
      </ScrollView>
    </View>
  );
}