import { BarChart3, Building2, FileText, Home, Lightbulb, LineChart, type LucideIcon } from "lucide-react";

import type { BlogTone } from "@/data/blogs.data";

const visuals: Record<BlogTone, { icon: LucideIcon; gradient: string; accent: string }> = {
  violet: { icon: LineChart, gradient: "from-[#655ef0] via-[#7061ef] to-[#9368ef]", accent: "bg-white/20" },
  blue: { icon: Building2, gradient: "from-[#4176e5] via-[#4f8fec] to-[#62b7eb]", accent: "bg-white/20" },
  green: { icon: Home, gradient: "from-[#2c9f70] via-[#38b680] to-[#66cca0]", accent: "bg-white/20" },
  orange: { icon: BarChart3, gradient: "from-[#e88b3e] via-[#ef9e4b] to-[#f3bd67]", accent: "bg-white/20" },
  rose: { icon: FileText, gradient: "from-[#d96b83] via-[#e57b8b] to-[#ef9b9d]", accent: "bg-white/20" },
  cyan: { icon: Lightbulb, gradient: "from-[#268fa9] via-[#35a9c0] to-[#68cbd6]", accent: "bg-white/20" },
};

export default function BlogVisual({ label, large = false, tone }: { label: string; large?: boolean; tone: BlogTone }) {
  const visual = visuals[tone];
  const Icon = visual.icon;
  return (
    <div className={`relative overflow-hidden bg-gradient-to-br ${visual.gradient} ${large ? "min-h-[310px] rounded-[24px] p-6" : "h-[180px] rounded-t-2xl p-4"}`}>
      <div className="absolute -right-10 -top-14 h-40 w-40 rounded-full border border-white/20 bg-white/10" />
      <div className="absolute -bottom-12 -left-7 h-32 w-32 rounded-full border border-white/20 bg-white/10" />
      <div className={`absolute ${large ? "right-7 top-7 h-20 w-20" : "right-4 top-4 h-14 w-14"} grid place-items-center rounded-2xl ${visual.accent} text-white backdrop-blur-sm`}>
        <Icon size={large ? 38 : 27} strokeWidth={1.6} />
      </div>
      <div className="absolute inset-x-5 bottom-5">
        <span className="inline-flex rounded-full border border-white/20 bg-white/15 px-3 py-1 text-[10px] font-extrabold uppercase tracking-[0.16em] text-white backdrop-blur-sm">{label}</span>
        <div className="mt-4 flex items-end gap-2">
          {[42, 70, 54, 92, 76].map((height, index) => <span key={index} className="w-5 rounded-t-md bg-white/35" style={{ height: large ? height : height * 0.55 }} />)}
        </div>
      </div>
    </div>
  );
}