"use client"

import * as React from "react"
import { ArrowRight, CornerDownRight } from "lucide-react"

interface FollowUpsData {
  title: string
  questions: string[]
}

export function IQFollowUps({ data }: { data: FollowUpsData }) {
  return (
    <div className="mb-6">
      <div className="text-[11px] font-bold tracking-[.08em] uppercase text-[#9A968E] mb-3 flex items-center gap-1.5">
        <CornerDownRight className="size-[15px] text-accent-gold" />
        {data.title}
      </div>
      <div className="flex gap-2.5 flex-wrap">
        {data.questions.map((q, i) => (
          <button
            key={i}
            className="flex items-center gap-1.5 text-[13px] font-medium text-navy bg-white border border-[#C8C3BA] rounded-full px-[15px] py-[9px] cursor-pointer hover:-translate-y-0.5 hover:border-navy hover:shadow-sm transition-all duration-150"
          >
            {q}
            <ArrowRight className="size-3.5 text-[#9A968E]" />
          </button>
        ))}
      </div>
    </div>
  )
}