"use client";

import Link from "next/link";
import type { Section } from "@/types/api/section.types";

interface HashTagItem {
  id: number;
  name: string;
  [key: string]: unknown;
}

interface Props {
  section: Section;
  locale: string;
}

export default function HashTagSection({ section }: Props) {
  const lhref = (p: string) => `${p}`;
  const tags = section.data as unknown as HashTagItem[];
  if (!tags.length) return null;

  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-title">
            <h2>{section.title}</h2>
            {section.sub_title && (
              <span className="count">{section.sub_title}</span>
            )}
          </div>
        </div>

        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            gap: "0.625rem",
          }}
        >
          {tags.map((tag, i) => (
            <Link
              key={tag.id}
              href={lhref(`/search?q=${encodeURIComponent(tag.name)}`)}
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.25rem",
                padding: "0.375rem 0.875rem",
                borderRadius: 999,
                background: i % 5 === 0 ? "var(--brand)" : "var(--brand-light)",
                color: i % 5 === 0 ? "#fff" : "var(--brand)",
                fontSize: "0.813rem",
                fontWeight: 600,
                textDecoration: "none",
                border: `1px solid ${i % 5 === 0 ? "var(--brand)" : "var(--brand-light)"}`,
                transition: "all 0.15s",
              }}
            >
              <span style={{ fontSize: "0.75rem", opacity: 0.7 }}>#</span>
              {tag.name}
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}