import * as React from 'react';

import { cn } from '@workspace/ui/lib/utils';

// Re-export existing Card components for convenience if needed,
// or create specific variants here.

// Example: A simple Card variation with a predefined style
export function FeatureCard({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      className={cn(
        'rounded-xl border bg-card text-card-foreground shadow-sm p-6 hover:shadow-md transition-shadow',
        className
      )}
      {...props}
    />
  );
}

// Example: A Card specifically for Case Studies with a title, description, and KPIs
export function CaseStudyCard({
  className,
  title,
  description,
  kpi1,
  kpi2,
  ctaText,
  ctaHref,
  ...props
}: React.ComponentProps<'div'> & {
  title: string;
  description: string;
  kpi1?: { value: string; label: string };
  kpi2?: { value: string; label: string };
  ctaText: string;
  ctaHref: string;
}) {
  return (
    <div
      className={cn(
        'flex flex-col h-full rounded-xl border bg-card text-card-foreground shadow-sm overflow-hidden',
        className
      )}
      {...props}
    >
      <div className="p-6 flex-grow">
        <h3 className="text-xl font-bold">{title}</h3>
        <p className="mt-2 text-muted-foreground">{description}</p>
        <div className="mt-4 flex flex-wrap gap-4">
          {kpi1 && (
            <div>
              <span className="text-lg font-semibold">{kpi1.value}</span>
              <span className="text-sm text-muted-foreground ml-1">{kpi1.label}</span>
            </div>
          )}
          {kpi2 && (
            <div>
              <span className="text-lg font-semibold">{kpi2.value}</span>
              <span className="text-sm text-muted-foreground ml-1">{kpi2.label}</span>
            </div>
          )}
        </div>
      </div>
      <div className="p-6 pt-0">
        <a
          href={ctaHref}
          className="inline-flex items-center text-sm font-medium text-primary hover:underline"
        >
          {ctaText}
          <span className="ml-1" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  );
}

// You can add more Card variations as needed for Solutions, Testimonials, etc.