./kaisetsu-app/src/components/Header.tsx

'use client';

import {
  FileVideo,
  Clock,
  Download,
} from 'lucide-react';

interface HeaderProps {
  fileName: string;
  lastModified: string;
  tcOffsetDisplay: string;
  onTcOffsetChange: (value: string) => void;
  onDownload: () => void;
}

export default function Header({
  fileName,
  lastModified,
  tcOffsetDisplay,
  onTcOffsetChange,
  onDownload,
}: HeaderProps) {
  return (
    <header className="bg-white border-b border-gray-200 px-6 py-4">
      <div className="flex items-center justify-between">
        {/* Left section: File info and TC */}
        <div className="flex items-center gap-8">
          {/* Logo/Title */}
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gray-900 flex items-center justify-center">
              <FileVideo className="w-5 h-5 text-white" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-gray-900">
                AI解説放送制作システム
              </h1>
              <p className="text-xs text-gray-500">Version 2.0</p>
            </div>
          </div>

          {/* File info */}
          <div className="flex items-center gap-6 pl-6 border-l border-gray-200">
            <div>
              <p className="text-xs text-gray-500 mb-1">ファイル名</p>
              <p className="text-sm font-medium text-gray-800 truncate max-w-[200px]">
                {fileName || '未選択'}
              </p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">最終更新</p>
              <p className="text-sm font-medium text-gray-800">
                {lastModified || '-'}
              </p>
            </div>
          </div>

          {/* Timecode input */}
          <div className="flex items-center gap-2 pl-6 border-l border-gray-200">
            <Clock className="w-4 h-4 text-gray-400" />
            <div>
              <p className="text-xs text-gray-500 mb-1">TC初期値</p>
              <input
                type="text"
                value={tcOffsetDisplay}
                onChange={(e) => onTcOffsetChange(e.target.value)}
                placeholder="09;59;45;00"
                className="w-28 px-2 py-1 text-sm font-mono bg-gray-50 border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 text-gray-800"
              />
            </div>
          </div>
        </div>

        {/* Right section: Action buttons */}
        <div className="flex items-center gap-2">
          <button
            onClick={onDownload}
            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 rounded-lg transition-colors"
          >
            <Download className="w-4 h-4" />
            一括ダウンロード
          </button>
        </div>
      </div>
    </header>
  );
}