import Link from "next/link";

type Props = {
    assessment: {
        id: string;
        title: string;
        price: number;
        description: string;
        image: string;
    };
};

export default function AssessmentCard({ assessment }: Props) {
    return (
        <div className="flex flex-col h-full">
            {/* TITLE - Fixed height for alignment */}
            <h3
                style={{
                    fontFamily: "Helvetica, Arial, sans-serif",
                    fontSize: "30px",
                    fontWeight: 700,
                    color: "#181b31",
                    marginBottom: "8px",
                    lineHeight: "1.25",
                    minHeight: "75px",
                    display: "flex",
                    alignItems: "center",
                }}
            >
                {assessment.title}
            </h3>

            {/* IMAGE */}
            <div
                className="relative overflow-hidden"
                style={{
                    height: "260px",
                    borderRadius: "18px",
                    marginBottom: "12px",
                }}
            >
                <img
                    src={assessment.image}
                    alt={assessment.title}
                    className="w-full h-full object-cover"
                />

                {/* GRADIENT OVERLAY */}
                <div
                    className="absolute inset-0"
                    style={{
                        background:
                            "linear-gradient(135deg, rgba(0,127,255,0.25), rgba(255,77,84,0.35))",
                    }}
                />
            </div>

            {/* PRICE */}
            <p
                style={{
                    fontFamily: "Helvetica, Arial, sans-serif",
                    fontSize: "26px",
                    fontWeight: 700,
                    color: "#181b31",
                    marginBottom: "8px",
                }}
            >
                Price: Rs.{assessment.price}
            </p>

            {/* DESCRIPTION */}
            <p
                className="flex-grow"
                style={{
                    fontFamily: "Helvetica, Arial, sans-serif",
                    fontSize: "17px",
                    color: "#626974",
                    lineHeight: "1.7",
                    marginBottom: "12px",
                }}
            >
                {assessment.description}
            </p>

            {/* BUTTON */}
            <Link
                href={`/assessments/${assessment.id}`}
                className="block text-center transition-all duration-300 hover:opacity-90"
                style={{
                    background: "linear-gradient(90deg, #62c0e2 0%, #b53855 100%)",
                    color: "#ffffff",
                    fontFamily: "Helvetica, Arial, sans-serif",
                    fontSize: "18px",
                    fontWeight: 500,
                    padding: "18px 0",
                    textDecoration: "none",
                    borderRadius: "0",
                }}
            >
                More Info
            </Link>
        </div>
    );
}