import React from 'react';
import { Mic, FileText, Calendar, Upload } from 'lucide-react';

interface TabsProps {
    currentTab: 'recorder' | 'transcription' | 'settings' | 'meetings' | 'history' | 'import';
    onTabChange: (tab: 'recorder' | 'transcription' | 'settings' | 'meetings' | 'history' | 'import') => 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('import')}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'import' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
            >
                <Upload size={16} />
                Import
            </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('meetings')}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'meetings' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
            >
                <Calendar size={16} />
                Meetings
            </button>
            <button
                onClick={() => onTabChange('history')}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${currentTab === 'history' ? 'bg-secondary text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'}`}
            >
                <FileText size={16} />
                History
            </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;