// components/sections/CTAButton.tsx
// Standalone CTA button with 5 themes
import React from 'react';
import Link from 'next/link';
import { getLinkAttributes, type LinkTarget, type LinkRel } from '@/lib/puck/linkHelpers';
import { ArrowRight } from 'lucide-react';

type ThemeKey = 'default' | 'warm' | 'professional' | 'ocean' | 'forest';

interface ThemeStyles {
  primary: string;
  secondary: string;
  outline: string;
}

const THEMES: Record<ThemeKey, ThemeStyles> = {
  default: {
    primary: 'bg-hover-red hover:bg-crimson-red text-white shadow hover:shadow-lg',
    secondary: 'bg-crimson-red hover:bg-hover-red text-white shadow hover:shadow-lg',
    outline: 'border-2 border-crimson-red text-crimson-red hover:bg-crimson-red hover:text-white',
  },
  warm: {
    primary: 'bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white shadow-lg shadow-orange-500/20',
    secondary: 'bg-orange-600 hover:bg-red-600 text-white shadow-lg',
    outline: 'border-2 border-orange-500 text-orange-600 hover:bg-orange-500 hover:text-white',
  },
  professional: {
    primary: 'bg-slate-800 hover:bg-slate-700 text-white shadow-lg',
    secondary: 'bg-emerald-600 hover:bg-emerald-700 text-white shadow-lg',
    outline: 'border-2 border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white',
  },
  ocean: {
    primary: 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg shadow-blue-600/20',
    secondary: 'bg-blue-600 hover:bg-indigo-600 text-white shadow-lg',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white',
  },
  forest: {
    primary: 'bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white shadow-lg shadow-emerald-600/20',
    secondary: 'bg-emerald-600 hover:bg-teal-600 text-white shadow-lg',
    outline: 'border-2 border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white',
  },
};

interface CTAButtonProps {
  text?: string;
  href?: string;
  variant?: 'primary' | 'secondary' | 'outline';
  align?: 'left' | 'center' | 'right';
  showArrow?: boolean;
  theme?: ThemeKey;
  openInNewTab?: LinkTarget;
  relAttribute?: LinkRel;
}

export function CTAButton({
  text = 'もっと詳しく',
  href = '#',
  variant = 'primary',
  align = 'center',
  showArrow = true,
  theme = 'default',
  openInNewTab = 'same',
  relAttribute = 'follow',
}: CTAButtonProps) {
  const t = THEMES[theme] || THEMES.default;
  const variantClass = t[variant] || t.primary;
  const linkAttrs = getLinkAttributes({ openInNewTab, relAttribute });

  const alignClasses = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  };

  return (
    <div className="container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className={`w-full py-8 ${alignClasses[align]}`}>
      <Link
        href={href || '#'}
        {...linkAttrs}
        className={`inline-flex items-center gap-2 font-bold text-sm md:text-base py-4 px-10 rounded-full transition-all duration-300 hover:-translate-y-1 ${variantClass}`}
      >
        {text}
        {showArrow && <ArrowRight className="w-5 h-5" />}
      </Link>
    </div>
    </div>
  );
}
