'use client';

import { ChevronsUp, AlertCircle } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

export interface StatCardProps {
	title: string;
	value?: number | string;
	subtext?: string;
	change?: number;
	icon: React.ElementType;
	isLoading: boolean;
	description?: string;
	alert?: boolean;
}

const StatCard = ({
	title,
	value,
	subtext,
	change,
	icon: Icon,
	isLoading,
	description,
	alert,
}: StatCardProps) => {
	return (
		<Card
			className={cn(
				'relative overflow-hidden group bg-[#1F1B16] border border-[#CBB26A]/15 shadow-[0_8px_20px_-6px_rgba(0,0,0,0.5)]',
				alert && 'border-yellow-500'
			)}
		>
			{/* gold hover line */}
			<div className="absolute top-0 left-0 w-full h-[2px] bg-linear-to-r from-transparent via-[#CBB26A]/40 to-transparent scale-x-0 group-hover:scale-x-100 transition-transform duration-700" />

			<CardHeader className="flex flex-row items-center justify-between pb-2">
				<CardTitle className="text-xs uppercase tracking-wider text-[#CBB26A]/70 font-inter">
					{title}
				</CardTitle>

				<div className="flex items-center gap-2">
					{alert && <AlertCircle className="h-4 w-4 text-yellow-500" />}

					<div className="w-9 h-9 rounded-lg bg-[#CBB26A]/10 flex items-center justify-center border border-[#CBB26A]/20">
						<Icon className="h-4 w-4 text-[#CBB26A]" />
					</div>
				</div>
			</CardHeader>

			<CardContent>
				{isLoading ? (
					<Skeleton className="h-10 w-full bg-[#2A241C]" />
				) : (
					<>
						<div className="flex items-baseline gap-2">
							<div className="text-3xl font-playfair font-bold text-[#E5D9C6]">
								{typeof value === 'number'
									? value.toLocaleString()
									: value}
							</div>

							{subtext && (
								<span className="text-sm text-[#CBB26A]/60">
									{subtext}
								</span>
							)}
						</div>

						{description && (
							<p className="text-xs text-[#CBB26A]/50 mt-1">
								{description}
							</p>
						)}

						{change !== undefined && (
							<p
								className={cn(
									'text-xs flex items-center mt-3',
									change > 0 ? 'text-[#CBB26A]' : 'text-red-400'
								)}
							>
								<ChevronsUp
									className={cn(
										'h-3 w-3 mr-1 transition-transform',
										change > 0 ? '' : 'rotate-180'
									)}
								/>
								{Math.abs(change)}% from last period
							</p>
						)}
					</>
				)}
			</CardContent>
		</Card>
	);
};

export default StatCard;