import { useState } from 'react';
import HistoryTab from '../components/screening/HistoryTab';

export default function RiskComplianceHistory() {
    const [lang, setLang] = useState('KO');

    return (
        <div className="space-y-6">
            {/* 헤더 */}
            <div className="bg-gradient-to-r from-slate-900 via-blue-900 to-red-900 rounded-xl p-6 text-white">
                <div className="text-xs opacity-75 mb-1">
                    S&P Global · Maritime Intelligence Risk Suite (MIRS)
                </div>
                <h1 className="text-xl font-bold mb-1">
                    Risk & Compliance Change History
                </h1>
                <p className="text-sm opacity-85">
                    위험 지표 및 컴플라이언스 값 변경 이력
                </p>
            </div>

            {/* 언어 토글 */}
            <div className="flex justify-end">
                <div className="flex gap-1 border border-wing-border rounded-lg overflow-hidden">
                    <button
                        onClick={() => setLang('EN')}
                        className={`px-3 py-1.5 text-xs font-bold transition-colors ${
                            lang === 'EN'
                                ? 'bg-slate-900 text-white'
                                : 'bg-wing-card text-wing-muted hover:text-wing-text'
                        }`}
                    >
                        EN
                    </button>
                    <button
                        onClick={() => setLang('KO')}
                        className={`px-3 py-1.5 text-xs font-bold transition-colors ${
                            lang === 'KO'
                                ? 'bg-slate-900 text-white'
                                : 'bg-wing-card text-wing-muted hover:text-wing-text'
                        }`}
                    >
                        KO
                    </button>
                </div>
            </div>

            <HistoryTab lang={lang} />
        </div>
    );
}