"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { TestTube2, Tag, AlertTriangle, CheckCircle2, Languages } from "lucide-react";
import { Badge } from "../../ui/badge";
import { Button } from "../../ui/button";
import { cn } from "../../../lib/utils";
function BDDHeader({ feature, testCount, language, onLanguageChange, hasMultipleLanguages }) {
  const getPriorityIcon = (priority) => {
    switch (priority) {
      case "high":
        return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4 text-red-500" });
      case "medium":
        return /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-yellow-500" });
      case "low":
        return /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-green-500" });
      default:
        return null;
    }
  };
  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", "data-cy": "bdd-header", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(TestTube2, { className: "h-5 w-5 text-violet-600 dark:text-violet-400" }),
          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: feature.title })
        ] }),
        feature.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: feature.description })
      ] }),
      feature.priority && /* @__PURE__ */ jsxs(
        Badge,
        {
          className: cn(
            "shrink-0",
            feature.priority === "high" && "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
            feature.priority === "medium" && "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
            feature.priority === "low" && "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
          ),
          children: [
            getPriorityIcon(feature.priority),
            /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
              feature.priority,
              " priority"
            ] })
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 flex-wrap", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 flex-wrap", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-lg bg-violet-100 dark:bg-violet-900/30", children: /* @__PURE__ */ jsx("span", { className: "font-bold text-violet-600 dark:text-violet-400", children: testCount }) }),
          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Test Cases" })
        ] }),
        feature.tags && feature.tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Tag, { className: "h-4 w-4 text-muted-foreground" }),
          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-wrap", children: feature.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
        ] }),
        feature.grepTags && feature.grepTags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground", children: "grep:" }),
          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-wrap", children: feature.grepTags.map((tag) => {
            const displayTag = tag.startsWith("@") ? tag : `@${tag}`;
            return /* @__PURE__ */ jsx(
              Badge,
              {
                variant: "outline",
                className: "text-xs font-mono bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-800 cursor-pointer hover:bg-emerald-100 dark:hover:bg-emerald-900/40 transition-colors",
                onClick: () => navigator.clipboard.writeText(displayTag),
                title: "Click to copy",
                children: displayTag
              },
              tag
            );
          }) })
        ] })
      ] }),
      hasMultipleLanguages && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", "data-cy": "bdd-language-toggle", children: [
        /* @__PURE__ */ jsx(Languages, { className: "h-4 w-4 text-muted-foreground" }),
        /* @__PURE__ */ jsxs("div", { className: "flex rounded-lg border border-border overflow-hidden", children: [
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "sm",
              className: cn(
                "rounded-none px-3 h-8 text-xs font-medium",
                language === "en" ? "bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300" : "text-muted-foreground hover:text-foreground"
              ),
              onClick: () => onLanguageChange("en"),
              "data-cy": "bdd-lang-en",
              children: "EN"
            }
          ),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "sm",
              className: cn(
                "rounded-none px-3 h-8 text-xs font-medium border-l border-border",
                language === "es" ? "bg-violet-100 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300" : "text-muted-foreground hover:text-foreground"
              ),
              onClick: () => onLanguageChange("es"),
              "data-cy": "bdd-lang-es",
              children: "ES"
            }
          )
        ] })
      ] })
    ] })
  ] });
}
export {
  BDDHeader
};
