'use client'

import type { BlockPreviewProps } from './index.js'

export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
  const heading = (data.heading as string) || ''
  const body = (data.body as string) || ''
  const buttonText = (data.buttonText as string) || ''

  const button = (
    <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
      {buttonText || 'Click Here'}
    </span>
  )

  if (variant === 'inline') {
    return (
      <div className="border-border flex items-center justify-between gap-4 rounded-md border p-4">
        <div className="flex-1">
          <p className="text-foreground text-sm font-medium">
            {heading || <span className="text-muted-foreground">CTA Heading</span>}
          </p>
          {body && <p className="text-muted-foreground mt-1 text-xs">{body}</p>}
        </div>
        {button}
      </div>
    )
  }

  if (variant === 'floating') {
    return (
      <div className="border-border bg-card mx-auto max-w-md rounded-lg border p-6 shadow-md">
        <div className="text-center">
          <h3 className="text-foreground text-lg font-medium">
            {heading || <span className="text-muted-foreground">CTA Heading</span>}
          </h3>
          {(body || !heading) && (
            <p className="text-muted-foreground mt-2 text-sm">
              {body || 'Supporting text for the call to action'}
            </p>
          )}
          <div className="mt-4">{button}</div>
        </div>
      </div>
    )
  }

  if (variant === 'split') {
    return (
      <div className="border-border flex items-center gap-6 rounded-md border p-6">
        <div className="flex-1">
          <h3 className="text-foreground text-lg font-medium">
            {heading || <span className="text-muted-foreground">CTA Heading</span>}
          </h3>
          {(body || !heading) && (
            <p className="text-muted-foreground mt-2 text-sm">
              {body || 'Supporting text for the call to action'}
            </p>
          )}
        </div>
        <div className="shrink-0">{button}</div>
      </div>
    )
  }

  return (
    <div className="border-border bg-accent rounded-md border p-6 text-center">
      <h3 className="text-foreground text-lg font-medium">
        {heading || <span className="text-muted-foreground">CTA Heading</span>}
      </h3>
      {(body || !heading) && (
        <p className="text-muted-foreground mt-2 text-sm">
          {body || 'Supporting text for the call to action'}
        </p>
      )}
      <div className="mt-4">{button}</div>
    </div>
  )
}
