import React from "react";
import { TestimonialCardProps } from "./types";
import clsx from "clsx";
import Image from "next/image";

import { MaterialIcon } from "@shared/components/material-icon";
import { Text } from "@shared/components/text";

export const TestimonialCard: React.FC<TestimonialCardProps> = ({
  title,
  quote,
  rating,
  author,
  role,
  avatarUrl,
  isActive = false,
  className,
}) => {
  return (
    <figure
      className={clsx(
        "flex w-full flex-col gap-6 rounded-card-lg p-6 transition-all duration-300 md:gap-10 md:p-14",
        isActive
          ? "bg-bg-surface-secondary shadow-drop"
          : "bg-gray-50 opacity-40", // Active vs Inactive styles
        className
      )}
    >
      <div className="flex flex-col justify-start gap-3 md:gap-5">
        <header>
          <Text as="h3" className="label1 text-text">
            {title}
          </Text>
        </header>
        <blockquote className="body1 text-text">{quote}</blockquote>

        {/* Rating Stars */}
        {rating ? (
          <div className="flex" aria-label={`Rating: ${rating} out of 5`}>
            {[...Array(5)].map((_, i) => (
              <MaterialIcon
                key={i}
                size={24}
                name="star"
                fill={1}
                className={clsx(
                  "h-[21px] w-[21px]",
                  i < rating ? "text-text" : "text-gray-300"
                )}
                aria-hidden="true"
              />
            ))}
          </div>
        ) : null}
      </div>

      {/* Author Block */}
      {author && (
        <figcaption className="flex gap-3 md:gap-5">
          <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-full bg-gray-300">
            {avatarUrl ? (
              <Image
                src={avatarUrl}
                alt={author}
                fill={true}
                className="object-cover"
                sizes="40px"
              />
            ) : (
              <div className="flex h-full w-full items-center justify-center bg-gray-500 text-xs font-bold text-white">
                {author.charAt(0)}
              </div>
            )}
          </div>

          <div className="flex flex-col">
            <cite className="label3 font-bold not-italic text-text">
              {author}
            </cite>
            <Text as="p" className="body3 text-text">
              {role}
            </Text>
          </div>
        </figcaption>
      )}
    </figure>
  );
};

export default TestimonialCard;