import React from 'react';
import { LayoutGrid, List } from 'lucide-react';
import { cn } from '@/utils';
import { Button } from "@/components/ui/button";

export type ViewMode = 'grid' | 'list';

interface ViewDisplayControlProps {
    mode: ViewMode;
    onModeChange: (mode: ViewMode) => void;
    gridColumns: number;
    setGridColumns: (cols: number) => void;
    listColumns: number;
    setListColumns: (cols: number) => void;
    gridMin?: number;
    gridMax?: number;
    listMin?: number;
    listMax?: number;
    showList?: boolean;
    showGrid?: boolean;
    className?: string;
}

export function ViewDisplayControl({ 
    mode, 
    onModeChange, 
    gridColumns, 
    setGridColumns, 
    listColumns, 
    setListColumns,
    gridMin = 2, 
    gridMax = 6,
    listMin = 1,
    listMax = 2,
    showList = true,
    showGrid = true,
    className 
}: ViewDisplayControlProps) {
    const gridOptions = Array.from({ length: gridMax - gridMin + 1 }, (_, i) => gridMin + i);
    const listOptions = Array.from({ length: listMax - listMin + 1 }, (_, i) => listMin + i);

    return (
        <div className={cn("flex items-center gap-2", className)}>
            {/* List Control */}
            {showList && (
                <div className={cn(
                    "flex items-center bg-background p-1 rounded-lg border transition-all group",
                    mode === 'list' ? "border-border bg-card" : "border-border hover:border-border"
                )}>
                    <div 
                        className={cn(
                            "w-8 h-8 flex items-center justify-center transition-colors cursor-pointer",
                            mode === 'list' ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
                        )}
                        onClick={() => onModeChange('list')}
                    >
                        <List size={16} />
                    </div>
                    <div className="flex items-center gap-1 max-w-0 overflow-hidden opacity-0 group-hover:max-w-[200px] group-hover:opacity-100 transition-all duration-300 ease-in-out">
                        {listOptions.map((cols) => (
                            <Button
                                key={`list-${cols}`}
                                variant={listColumns === cols ? "default" : "ghost"}
                                size="icon"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onModeChange('list');
                                    setListColumns(cols);
                                }}
                                className={cn(
                                    "w-8 h-8 flex-shrink-0",
                                    listColumns === cols
                                        ? "bg-blue-600 text-white shadow-sm"
                                        : "text-muted-foreground hover:text-foreground hover:bg-card"
                                )}
                            >
                                {cols}
                            </Button>
                        ))}
                    </div>
                </div>
            )}

            {/* Grid Control */}
            {showGrid && (
                <div className={cn(
                    "flex items-center bg-background p-1 rounded-lg border transition-all group",
                    mode === 'grid' ? "border-border bg-card" : "border-border hover:border-border"
                )}>
                    <div 
                        className={cn(
                            "w-8 h-8 flex items-center justify-center transition-colors cursor-pointer",
                            mode === 'grid' ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
                        )}
                        onClick={() => onModeChange('grid')}
                    >
                        <LayoutGrid size={16} />
                    </div>
                    <div className="flex items-center gap-1 max-w-0 overflow-hidden opacity-0 group-hover:max-w-[200px] group-hover:opacity-100 transition-all duration-300 ease-in-out">
                        {gridOptions.map((cols) => (
                            <Button
                                key={`grid-${cols}`}
                                variant={gridColumns === cols ? "default" : "ghost"}
                                size="icon"
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onModeChange('grid');
                                    setGridColumns(cols);
                                }}
                                className={cn(
                                    "w-8 h-8 flex-shrink-0",
                                    gridColumns === cols
                                    ? "bg-blue-600 text-white"
                                    : "text-muted-foreground hover:text-foreground"
                            )}
                        >
                            {cols}
                        </Button>
                    ))}
                </div>
            </div>
            )}
        </div>
    );
}
