"use client";
import { Card } from "@/components/ui/Card";

const approvals = [
  { id: "a1", type: "请假", applicant: "张三", status: "pending", date: "2026-06-05" },
  { id: "a2", type: "报销", applicant: "李四", status: "approved", date: "2026-06-04" },
  { id: "a3", type: "加班", applicant: "王五", status: "rejected", date: "2026-06-03" },
];
const statusMap: Record<string, { label: string; color: string }> = {
  pending: { label: "待审批", color: "bg-yellow-100 text-yellow-700" },
  approved: { label: "已通过", color: "bg-green-100 text-green-700" },
  rejected: { label: "已驳回", color: "bg-red-100 text-red-700" },
};

export default function ApprovalPage() {
  return (
    <div className="space-y-4">
      <h1 className="text-xl font-bold text-gray-800">我的审批</h1>
      {approvals.map(a => {
        const s = statusMap[a.status];
        return (
          <Card key={a.id}>
            <div className="flex items-center justify-between">
              <div>
                <p className="font-medium text-gray-800">{a.type}申请 — {a.applicant}</p>
                <p className="text-xs text-gray-400 mt-1">{a.date}</p>
              </div>
              <span className={`text-xs px-2 py-1 rounded ${s.color}`}>{s.label}</span>
            </div>
          </Card>
        );
      })}
    </div>
  );
}