"use client";

import Link from "next/link";
import { aiDict } from "@/features/ai/dict";

function SparkIcon() {
  return (
    <svg
      aria-hidden="true"
      className="size-7 text-primary-foreground"
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path d="M12 2l1.6 4.8L18 8.4l-4.4 1.6L12 15l-1.6-4.8L6 8.4l4.4-1.6L12 2z" />
    </svg>
  );
}

export function DashboardAiBanner() {
  return (
    <Link
      href="/panel/ai"
      className="block rounded-3xl transition-transform hover:scale-[1.01] active:scale-[0.99]"
    >
      <section className="relative overflow-hidden rounded-3xl bg-card p-4 shadow-soft-sm sm:p-5">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -end-6 -top-6 size-24 rounded-full bg-violet-500/10"
        />
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -bottom-8 start-8 size-32 rounded-full bg-violet-500/5"
        />
        <div
          aria-hidden="true"
          className="pointer-events-none absolute end-16 top-4 text-violet-500/20"
        >
          ✦
        </div>

        <div className="relative flex items-center gap-4">
          <div className="inline-flex size-14 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-primary shadow-soft-sm">
            <SparkIcon />
          </div>

          <div className="min-w-0 flex-1 space-y-1">
            <p className="text-sm font-semibold leading-6 text-card-foreground sm:text-base">
              {aiDict.bannerTitle}
            </p>
            <p className="text-xs text-muted-foreground sm:text-sm">
              {aiDict.bannerSubtitle}
            </p>
          </div>

          <svg
            aria-hidden="true"
            className="size-6 shrink-0 text-muted-foreground"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path d="M9 6l6 6-6 6" />
          </svg>
        </div>
      </section>
    </Link>
  );
}