"use client";

import Link from "next/link";
import { Target } from "lucide-react";
import { ProfileHero } from "@/components/design-system/profile-hero";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useLocale } from "@/components/providers/locale-provider";

export function SegmentDetailShell({
  id,
  name,
  description,
  targetType,
  type,
  status,
  memberCount,
  actions,
  children,
}: {
  id: string;
  name: string;
  description?: string | null;
  targetType: string;
  type: string;
  status: string;
  memberCount: number;
  actions?: React.ReactNode;
  children: React.ReactNode;
}) {
  const { locale } = useLocale();

  return (
    <div className="animate-fade-in space-y-6">
      <ProfileHero
        icon={Target}
        title={name}
        subtitle={description ?? undefined}
        badges={
          <>
            <Badge variant="secondary">{targetType}</Badge>
            <Badge variant="secondary">{type}</Badge>
            <Badge variant="default">{status}</Badge>
            <Badge variant="secondary">
              {locale === "ar" ? "أعضاء" : "Members"}: {memberCount}
            </Badge>
          </>
        }
        actions={
          <>
            <Button asChild variant="outline" size="sm">
              <Link href={`/segments/${id}/edit`}>
                {locale === "ar" ? "تعديل" : "Edit"}
              </Link>
            </Button>
            {actions}
          </>
        }
        backHref="/segments"
        backLabel={locale === "ar" ? "← العودة للشرائح" : "← Back to segments"}
      />
      {children}
    </div>
  );
}