import React from 'react';

const DeviceFilter = ({ selectedType, onSelectType }) => {
  const filterOptions = [
    { id: 'all', label: 'All Devices' },
    { id: 'iphone', label: 'iPhone' },
    { id: 'ipad', label: 'iPad' },
    { id: 'ipod', label: 'iPod' },
    { id: 'legacy', label: 'Legacy Devices' },
  ];

  return (
    <div className="flex flex-wrap gap-2 mb-6">
      {filterOptions.map((option) => (
        <button
          key={option.id}
          onClick={() => onSelectType(option.id)}
          className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
            selectedType === option.id
              ? 'bg-blue-600 text-white shadow-md'
              : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
          }`}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
};