import type { Metadata } from 'next';
import { publicApi } from '@/lib/services';
import { resolveUploadUrl } from '@/lib/utils';

export const metadata: Metadata = {
  title: '团队介绍',
  description: '认识我们的核心团队成员。',
};

export const revalidate = 60;

export default async function TeamPage() {
  const team = await publicApi.getTeam().catch(() => []);
  return (
    <div className="container-page py-12">
      <h1 className="text-3xl font-bold text-gray-900">团队介绍</h1>
      <p className="mt-2 text-sm text-gray-500">
        由经验丰富的专业人士组成
      </p>
      <div className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
        {team.map((m) => (
          <div key={m.id} className="text-center">
            <div className="mx-auto h-32 w-32 overflow-hidden rounded-full bg-gray-100">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={resolveUploadUrl(m.avatar)}
                alt={m.name}
                className="h-full w-full object-cover"
              />
            </div>
            <h3 className="mt-4 text-lg font-semibold text-gray-900">
              {m.name}
            </h3>
            <p className="text-sm text-brand-600">{m.position}</p>
            {m.desc && (
              <p className="mt-2 text-sm text-gray-500">{m.desc}</p>
            )}
          </div>
        ))}
      </div>
      {team.length === 0 && (
        <div className="mt-8 flex h-32 items-center justify-center rounded-md border border-dashed text-sm text-gray-400">
          暂无成员
        </div>
      )}
    </div>
  );
}