import React from 'react';
import { motion, type HTMLMotionProps } from 'framer-motion';
import { ZapOff } from 'lucide-react';
import { Button } from '@/components/ui/button';

export type DemoReadOnlyNoticeProps = {
  title: string;
  copy: string;
  hint?: string;
  ctaLabel?: string;
  onCta?: () => void;
  radius?: number;
  bodyFont?: string;
  motionProps?: HTMLMotionProps<'div'>;
};

export default function DemoReadOnlyNotice({
  title,
  copy,
  hint,
  ctaLabel,
  onCta,
  radius,
  bodyFont,
  motionProps,
}: DemoReadOnlyNoticeProps) {
  return (
    <motion.div
      className="rounded-[28px] border border-white/15 bg-black/70 p-5 text-white shadow-2xl backdrop-blur"
      style={{ borderRadius: radius, fontFamily: bodyFont }}
      {...motionProps}
    >
      <div className="flex items-start gap-3">
        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
          <ZapOff className="h-5 w-5 text-amber-200" />
        </div>
        <div className="space-y-1">
          <p className="text-sm font-semibold">{title}</p>
          <p className="text-xs text-white/80">{copy}</p>
          {hint ? <p className="text-[11px] text-white/60">{hint}</p> : null}
        </div>
      </div>
      {ctaLabel && onCta ? (
        <div className="mt-4 flex flex-wrap gap-3">
          <Button
            size="sm"
            variant="secondary"
            className="rounded-full bg-white/90 text-slate-900 hover:bg-white"
            onClick={onCta}
          >
            {ctaLabel}
          </Button>
        </div>
      ) : null}
    </motion.div>
  );
}