type BlogBlocksCategoryTabsProps = {
  labels: string[];
};

export function BlogBlocksCategoryTabs({ labels }: BlogBlocksCategoryTabsProps) {
  return (
    <div
      role="tablist"
      aria-label="دسته‌بندی وبلاگ"
      className="-ml-0.5 flex snap-x snap-mandatory overflow-x-auto py-3 max-md:px-6"
    >
      {labels.map((label, index) => (
        <button
          key={label}
          role="tab"
          aria-selected={index === 0}
          className="group snap-center px-1 text-muted-foreground disabled:pointer-events-none disabled:opacity-50"
        >
          <span
            className={
              index === 0
                ? "flex w-fit items-center gap-2 rounded-md bg-card px-3 py-1.5 text-sm font-medium text-primary shadow-sm ring-1 shadow-black/6.5 ring-border transition-colors"
                : "flex w-fit items-center gap-2 rounded-md px-3 py-1.5 text-sm tra *:nsition-colors group-hover:bg-foreground/5 hover:text-foreground"
            }
          >
            <span className="capitalize">{label}</span>
          </span>
        </button>
      ))}
    </div>
  );
}