'use client';

import React from 'react';
import { Button } from './ui/button';
import { Grid3X3, List } from 'lucide-react';

interface ViewToggleProps {
  viewMode: 'card' | 'list';
  onViewModeChange: (mode: 'card' | 'list') => void;
}

export function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) {
  return (
    <div className="flex justify-center mb-6">
      <div className="flex items-center space-x-1 bg-muted rounded-lg p-1">
        <Button
          onClick={() => onViewModeChange('card')}
          variant={viewMode === 'card' ? 'default' : 'ghost'}
          size="sm"
          className={`flex items-center space-x-2 ${
            viewMode === 'card'
              ? 'bg-primary text-primary-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'
          }`}
        >
          <Grid3X3 className="h-4 w-4" />
          <span className="text-sm">Card View</span>
        </Button>
        <Button
          onClick={() => onViewModeChange('list')}
          variant={viewMode === 'list' ? 'default' : 'ghost'}
          size="sm"
          className={`flex items-center space-x-2 ${
            viewMode === 'list'
              ? 'bg-primary text-primary-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'
          }`}
        >
          <List className="h-4 w-4" />
          <span className="text-sm">List View</span>
        </Button>
      </div>
    </div>
  );
}