'use client';

import { CheckCircle2, XCircle } from 'lucide-react';
import { useApp } from '@/providers/app-provider';

export default function CompanyApprovalPage() {
  const { t } = useApp();

  return (
    <div className="grid gap-6 lg:grid-cols-3">
      <section className="od-panel space-y-4 p-6 lg:col-span-2">
        <h2 className="text-xl font-extrabold tracking-tight">{t('approval.title')}</h2>
        <p className="text-sm text-black/65">{t('approval.review_subtitle')}</p>
        <dl className="grid gap-3 text-sm sm:grid-cols-2">
          <div>
            <dt className="text-black/50">{t('approval.deal_value')}</dt>
            <dd className="font-semibold">SAR 4,250,000</dd>
          </div>
          <div>
            <dt className="text-black/50">{t('approval.shares')}</dt>
            <dd className="font-semibold">50,000</dd>
          </div>
        </dl>
        <div className="flex flex-wrap gap-2 pt-2">
          <button type="button" className="apple-btn-primary">
            {t('approval.approve')}
          </button>
          <button type="button" className="apple-btn-secondary text-danger">
            {t('approval.reject')}
          </button>
        </div>
      </section>

      <aside className="od-panel p-5 text-sm">
        <p className="font-semibold">{t('sms.preview')}</p>
        <p className="mt-2 text-black/70">
          SOT Platform: Transfer request for Future Tech Ventures SJSC. Review within 24 hours.
        </p>
        <div className="mt-4 flex items-center gap-2 text-success">
          <CheckCircle2 className="h-4 w-4" />
          TRF v01 · company approval (no ROFR)
        </div>
        <div className="mt-2 flex items-center gap-2 text-black/50">
          <XCircle className="h-4 w-4" />
          Wired to POST /v1/transfers/{'{id}'}/company-approval (API Phase 2)
        </div>
      </aside>
    </div>
  );
}