import { ArrowUpRight, Clock3, Eye } from "lucide-react";
import { Link } from "react-router-dom";
import { Badge } from "./Badge";
import { ResponsiveImage } from "./ResponsiveImage";

export function MaterialCard({
  material,
  compact = false,
}) {
  return (
    <article className="group overflow-hidden rounded-lg border border-line bg-surface transition duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-soft">
      {!compact && (
        <Link to={`/materials/${material.slug}`} viewTransition>
          <ResponsiveImage
            src={material.image}
            alt=""
            className="aspect-[16/10] w-full object-cover transition duration-300 group-hover:scale-[1.02]"
          />
        </Link>
      )}
      <div className={compact ? "p-4" : "p-5"}>
        <div className="flex items-center justify-between gap-3">
          <Badge tone={material.type === "Исследование" ? "accent" : "neutral"}>
            {material.type}
          </Badge>
          <span className="text-xs text-muted">{material.category}</span>
        </div>
        <h3
          className={`mt-4 font-serif leading-tight text-ink ${
            compact ? "text-xl" : "text-2xl"
          }`}
        >
          <Link
            className="transition hover:text-primary"
            to={`/materials/${material.slug}`}
            viewTransition
          >
            {material.title}
          </Link>
        </h3>
        {!compact && <p className="mt-3 line-clamp-3 text-sm leading-6 text-muted">{material.excerpt}</p>}
        <div className="mt-5 flex items-center justify-between gap-4 border-t border-line pt-4 text-xs text-muted">
          <span className="flex items-center gap-1.5">
            <Clock3 className="size-3.5" />
            {material.readingTime} мин
          </span>
          <span className="flex items-center gap-1.5">
            <Eye className="size-3.5" />
            {material.views.toLocaleString("ru-RU")}
          </span>
          <ArrowUpRight className="size-4 text-primary transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
        </div>
      </div>
    </article>
  );
}
