src/components/ChromeBookmarkBar.tsx

import React from 'react';
import { Button } from '@/components/ui/button';

interface ChromeBookmarkBarProps {
  bookmarks: string[];
  onNavigateToBookmark: (url: string) => void;
  isVisible: boolean;
}

const ChromeBookmarkBar = ({ bookmarks, onNavigateToBookmark, isVisible }: ChromeBookmarkBarProps) => {
  if (!isVisible) return null;

  const getHostname = (url: string) => {
    try {
      return new URL(url).hostname;
    } catch {
      return url;
    }
  };

  return (
    <div className="bg-gray-50 border-b border-gray-200 px-3 py-1 flex items-center gap-1 overflow-x-auto">
      {bookmarks.length === 0 ? (
        <span className="text-sm text-gray-500">No bookmarks</span>
      ) : (
        bookmarks.map((url, index) => (
          <Button
            key={index}
            variant="ghost"
            size="sm"
            onClick={() => onNavigateToBookmark(url)}
            className="text-sm px-2 py-1 h-auto whitespace-nowrap hover:bg-gray-200 rounded"
          >
            {getHostname(url)}
          </Button>
        ))
      )}
    </div>
  );
};

export default ChromeBookmarkBar;