import React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import { LayoutGrid, Sun, Thermometer, Sparkles, Frame, type LucideIcon } from 'lucide-react-native';
import * as Haptics from 'expo-haptics';

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

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

const TOOLS: { id: TabId; label: string; icon: LucideIcon }[] = [
  { id: 'recipes', label: 'PRESETS', icon: LayoutGrid },
  { id: 'iq', label: 'LIGHT', icon: Sun },
  { id: 'wb', label: 'WB', icon: Thermometer },
  { id: 'filters', label: 'FX', icon: Sparkles },
  { id: 'frame', label: 'FRAME', icon: Frame },
];

export default function ToolRail({ activeTab, onToggle }: ToolRailProps) {
  return (
    <View className="py-1.5">
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 8 }}
      >
        {TOOLS.map((tool) => {
          const isActive = activeTab === tool.id;
          const Icon = tool.icon;
          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}
            >
              <Icon size={14} color={isActive ? '#f59e0b' : '#e4e4e7'} strokeWidth={1.75} />
              <Text
                className={`ml-1.5 font-mono text-[10px] font-bold tracking-widest ${
                  isActive ? 'text-amber-500' : 'text-zinc-300'
                }`}
              >
                {tool.label}
              </Text>
            </TouchableOpacity>
          );
        })}
      </ScrollView>
    </View>
  );
}