import React from 'react';
import { Mic, Terminal, FileText } from 'lucide-react';
interface TabsProps {
    currentTab: 'recorder' | 'logs' | 'transcription' | 'settings';
    onTabChange: (tab: 'recorder' | 'logs' | 'transcription' | 'settings') => void;
}

const Tabs: React.FC<TabsProps> = ({ currentTab, onTabChange }) => {
    return (
        <div className="flex items-center gap-1 bg-secondary/50 p-1 rounded-full border border-border/40 self-center">
            <button
                onClick={() => onTabChange('recorder')}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'recorder' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
            >
                <Mic size={16} />
                Recording
            </button>
            <button
                onClick={() => onTabChange('transcription')}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'transcription' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
            >
                <FileText size={16} />
                Transcription
            </button>
            <button
                onClick={() => onTabChange('logs')}
                className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium transition-all duration-200 ${currentTab === 'logs'
                    ? 'bg-background shadow-sm text-foreground ring-1 ring-border/50'
                    : 'text-muted-foreground hover:text-foreground hover:bg-background/50'
                    }`}
            >
                <Terminal size={14} />
                Logs
            </button>
            {/* Settings could be a tab, but often better as an icon elsewhere, however sticking to the 'tab' request */}
            {/* The user didn't explicitly ask for settings tab, but we need a way to get there. Let's keep it here for now or maybe just an icon? 
                 The prompt showed "Recording | Summary | Meetings". We are doing "Recording | Logs". 
                 Let's keep settings as a tab to simplify navigation for now. */}
            {/* <button
                onClick={() => onTabChange('settings')}
                className={`flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium transition-all duration-200 ${
                    currentTab === 'settings'
                         ? 'bg-background shadow-sm text-foreground ring-1 ring-border/50'
                        : 'text-muted-foreground hover:text-foreground hover:bg-background/50'
                }`}
            >
                <Settings size={14} />
                Settings
            </button> */}
        </div>
    );
};

export default Tabs;
