'use client';

interface TOCItem {
  id: string;
  title: string;
}

interface TableOfContentsProps {
  items: TOCItem[];
}

export function TableOfContents({ items }: TableOfContentsProps) {
  if (!items || items.length === 0) {
    return null;
  }

  return (
    <nav className="sticky top-20 rounded-lg border border-[#EAEAEA] bg-white p-6 hidden lg:block shadow-sm">
      <h2 className="text-lg font-semibold mb-4 text-[#E38A9B]">目次</h2>
      <ul className="space-y-2">
        {items.map((item) => (
          <li key={item.id}>
            <a
              href={`#${item.id}`}
              className="text-sm text-[#666666] hover:text-[#E38A9B] transition-colors block py-1"
            >
              {item.title}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}
