import React from 'react';
import { FileText, CheckCircle2, Layers } from 'lucide-react';
import { Recipe } from '../types';
import { PanelHeader } from './common/PanelHeader';
import { TechButton } from './common/TechButton';

interface RecipePanelProps {
    recipes: Recipe[];
    currentRecipe: Recipe;
    onSelectRecipe: (r: Recipe) => void;
}

export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe, onSelectRecipe }) => (
    <div className="h-full flex flex-col">
        <PanelHeader title="Recipe Select" icon={FileText} />
        <div className="space-y-2 flex-1 overflow-y-auto custom-scrollbar pr-2">
            {recipes.map(r => (
                <div
                    key={r.id}
                    onClick={() => onSelectRecipe(r)}
                    className={`
                        p-3 cursor-pointer flex justify-between items-center transition-all border-l-4
                        ${currentRecipe.id === r.id
                            ? 'bg-white/10 border-neon-blue text-white shadow-[inset_0_0_20px_rgba(0,243,255,0.1)]'
                            : 'bg-black/20 border-transparent text-slate-500 hover:bg-white/5 hover:text-slate-300'}
                    `}
                >
                    <div>
                        <div className="font-tech font-bold text-sm tracking-wide">{r.name}</div>
                        <div className="text-[10px] font-mono opacity-60">{r.lastModified}</div>
                    </div>
                    {currentRecipe.id === r.id && <CheckCircle2 className="w-4 h-4 text-neon-blue" />}
                </div>
            ))}
        </div>
        <TechButton className="w-full mt-4 flex items-center justify-center gap-2">
            <Layers className="w-4 h-4" /> New Recipe
        </TechButton>
    </div>
);