"use client";

import Link from "next/link";
import { motion, useReducedMotion } from "framer-motion";
import { type LucideIcon } from "lucide-react";

interface DashboardFeatureCardProps {
  title: string;
  description: string;
  icon: LucideIcon;
  uiSrc: string;
  href?: string;
  statusChip?: string;
  className?: string;
  delay?: number;
  isMounted?: boolean;
}

export default function DashboardFeatureCard({
  title,
  description,
  icon: Icon,
  uiSrc,
  href,
  statusChip,
  className = "",
  delay = 0,
  isMounted = false,
}: DashboardFeatureCardProps) {
  const shouldReduceMotion = useReducedMotion();

  const content = (
    <motion.div
      initial={shouldReduceMotion ? false : { y: 40, opacity: 0 }}
      whileInView={{ y: 0, opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.8, delay, ease: [0.21, 0.45, 0.32, 0.9] as const }}
      className={
        "flex flex-col items-start shrink-0 border border-[var(--border)] overflow-hidden bg-[var(--surface)] group w-full rounded-[24px] sm:rounded-[32px] " +
        (href ? "cursor-pointer " : "") +
        className
      }
    >
      <div className="relative w-full h-[320px] sm:h-[400px] lg:h-[440px] overflow-hidden flex items-center justify-center p-6 sm:p-8 bg-[var(--surface-elevated)]">
        {isMounted && (
          <img
            src="/agnet-assets/agnet-process-workflow.png"
            alt=""
            aria-hidden="true"
            className="absolute inset-0 w-full h-full object-cover opacity-10 dark:opacity-5 group-hover:scale-105 transition-transform duration-700"
          />
        )}
        <div className="relative z-10 w-full h-full flex items-center justify-center">
          <img
            src={uiSrc}
            alt={title}
            className="h-full w-full object-contain pointer-events-none select-none transition-all duration-500 group-hover:translate-y-[-10px]"
          />
        </div>

        {statusChip && (
          <div className="absolute top-4 right-4 z-20 px-3 py-1 rounded-full bg-[var(--green)]/10 border border-[var(--green)]/20">
            <span className="font-inter text-xs font-medium text-[var(--green)]">{statusChip}</span>
          </div>
        )}
      </div>

      <div className="p-6 sm:p-10 flex flex-col sm:flex-row items-start gap-5 self-stretch bg-[var(--surface)]">
        <div className="w-10 h-10 p-2 flex items-center justify-center border border-[var(--green)]/20 bg-[var(--green)]/5 rounded-lg shrink-0">
          <Icon className="w-6 h-6 text-[var(--green)] stroke-[3px]" />
        </div>
        <div className="flex flex-col gap-[10px]">
          <h3 className="text-[var(--ink)] font-onest text-xl sm:text-2xl font-semibold leading-tight sm:leading-[30px] tracking-[-0.8px]">
            {title}
          </h3>
          <p className="text-[var(--ink-soft)] font-inter text-base sm:text-lg font-normal leading-relaxed sm:leading-[28px]">
            {description}
          </p>
        </div>
      </div>
    </motion.div>
  );

  if (href) {
    return <Link href={href}>{content}</Link>;
  }

  return content;
}