'use client';

import { Section } from './Section';
import { colors, typography } from '@/styles/theme';

export interface RoleItem {
  code: string;
  name: string;
  scope: string;
  desc: string;
}

export interface RolesSectionProps {
  title: string;
  description?: string;
  items: RoleItem[];
  columnHeaders?: {
    role: string;
    scope: string;
    desc: string;
  };
}

export function RolesSection({ title, description, items, columnHeaders }: RolesSectionProps) {
  const headers = columnHeaders ?? { role: '角色', scope: '范围', desc: '说明' };
  return (
    <Section title={title} description={description}>
      <div className="overflow-x-auto">
        <table className="w-full text-left">
          <thead>
            <tr style={{ borderBottom: `1px solid ${colors.border}` }}>
              <th className={`${typography.caption} py-2 pr-4 font-medium`}>{headers.role}</th>
              <th className={`${typography.caption} py-2 pr-4 font-medium`}>{headers.scope}</th>
              <th className={`${typography.caption} py-2 font-medium`}>{headers.desc}</th>
            </tr>
          </thead>
          <tbody>
            {items.map((r) => (
              <tr key={r.code} style={{ borderBottom: `1px solid ${colors.border}` }}>
                <td className="py-3 pr-4">
                  <div className={`${typography.body} font-medium`}>{r.name}</div>
                  <div className={typography.caption}>{r.code}</div>
                </td>
                <td className={`${typography.bodySecondary} py-3 pr-4 whitespace-nowrap`}>
                  {r.scope}
                </td>
                <td className={`${typography.bodySecondary} py-3`}>{r.desc}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Section>
  );
}