"use client";

import type { AccessScope } from "@/types/rolesAccess";

export function AccessScopesSection({ rows }: { rows: AccessScope[] }) {
  return <section className="space-y-4"><div className="flex justify-between gap-3"><h2 className="text-xl font-black">محدوده‌های دسترسی</h2><button className="rounded-2xl bg-emerald-500 px-4 py-2 text-white">تعریف محدوده دسترسی</button></div><div className="grid gap-3 md:grid-cols-3">{rows.map((row) => <div key={row.id} className="liquid-glass rounded-[20px] p-4"><h3 className="font-black">{row.nameFa}</h3><p className="mt-2 text-sm opacity-70">{row.typeFa} • {row.targetFa}</p><div className="mt-3 flex gap-2"><button className="rounded-xl bg-white/15 px-3 py-1 text-sm">اختصاص به نقش</button><button className="rounded-xl bg-white/15 px-3 py-1 text-sm">اختصاص به کاربر</button></div></div>)}</div></section>;
}