'use client'

import * as motion from 'framer-motion/m'
import { useTranslations } from 'next-intl'
import { Shield, FileText, Scale, Truck, RefreshCw, HelpCircle } from 'lucide-react'

interface LegalLayoutProps {
  title: string
  lastUpdated: string
  children: React.ReactNode
  icon?: 'shield' | 'file' | 'scale' | 'truck' | 'refresh' | 'help'
}

const icons = {
  shield: Shield,
  file: FileText,
  scale: Scale,
  truck: Truck,
  refresh: RefreshCw,
  help: HelpCircle,
}

export default function LegalLayout({ title, lastUpdated, children, icon = 'file' }: LegalLayoutProps) {
  const Icon = icons[icon]
  const t = useTranslations('LegalPage')

  return (
    <div className="max-w-4xl mx-auto py-8 px-4">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center mb-8"
      >
        <div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-4">
          <Icon size={32} className="text-primary" />
        </div>
        <h1 className="text-3xl font-bold text-dark">{title}</h1>
        <p className="text-gray-custom text-sm mt-2">{t('lastUpdated', { date: lastUpdated })}</p>
      </motion.div>

      {/* Content */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8"
      >
        {children}
      </motion.div>
    </div>
  )
}