import type { CrossLinkBlock } from '@/payload-types'

import { type BlockContext, fill } from './context'

/** «Нужен адрес, закреплённый только за вами» (MassMain): ссылка на сайт другого бренда */
export function CrossLink({ block, context }: { block: CrossLinkBlock; context: BlockContext }) {
  const href = context.otherBrand[block.target]
  return (
    <section className="pt-6">
      <div className="flex flex-wrap items-center justify-between gap-[18px] rounded-[22px] border border-border bg-surface-2 p-[clamp(20px,5vw,32px)]">
        <div>
          <h3 className="mb-2 text-[20px] font-semibold tracking-[-0.025em]">{block.title}</h3>
          {block.text && (
            <p className="max-w-[46em] text-[15px] leading-[1.55] font-light text-ink-2">
              {fill(context, block.text)}
            </p>
          )}
        </div>
        {href && (
          <a
            href={href}
            className="flex h-12 items-center justify-center rounded-xl border border-accent px-[22px] text-[15px] font-medium whitespace-nowrap text-accent hover:bg-accent-soft hover:text-accent"
          >
            {block.buttonLabel}
          </a>
        )}
      </div>
    </section>
  )
}