import { Link } from "wouter";
import { Store } from "@/types";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, MapPin } from "lucide-react";

interface StoreCardProps {
  store: Store;
}

export default function StoreCard({ store }: StoreCardProps) {
  return (
    <Link href={`/store/${store.id}`}>
      <Card className="group cursor-pointer glass-card border-0 hover:scale-105 transition-all duration-300" data-testid={`store-card-${store.id}`}>
        {/* Store Banner */}
        <div className="relative h-32 bg-gradient-to-r from-primary via-secondary to-primary rounded-t-2xl overflow-hidden">
          {store.bannerImage ? (
            <img
              src={store.bannerImage}
              alt={`${store.name} banner`}
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              data-testid={`store-banner-${store.id}`}
            />
          ) : (
            <div className="absolute inset-0 bg-gradient-to-r from-primary via-secondary to-primary" />
          )}
          <div className="absolute inset-0 bg-black/20" />
        </div>

        <CardContent className="p-4">
          <div className="flex items-center space-x-4">
            {/* Store Face Image */}
            <div className="w-16 h-16 rounded-full overflow-hidden bg-muted flex-shrink-0 -mt-8 border-4 border-white shadow-lg">
              {store.faceImage ? (
                <img
                  src={store.faceImage}
                  alt={`${store.name} profile`}
                  className="w-full h-full object-cover"
                  data-testid={`store-face-${store.id}`}
                />
              ) : (
                <div className="w-full h-full bg-muted flex items-center justify-center">
                  <span className="text-muted-foreground text-xs">No Image</span>
                </div>
              )}
            </div>

            <div className="flex-1 pt-2">
              <h3 className="font-semibold text-foreground mb-1" data-testid={`store-name-${store.id}`}>
                {store.name}
              </h3>
              
              {/* Seller name */}
              <p className="text-xs text-muted-foreground mb-2" data-testid={`seller-name-${store.id}`}>
                By: {store.seller?.username || 'Store Owner'}
              </p>

              {/* Store Rating */}
              <div className="flex items-center mb-2">
                <div className="flex text-yellow-400 text-sm">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-3 w-3 fill-current" />
                  ))}
                </div>
                <span className="text-xs text-muted-foreground ml-2" data-testid={`store-rating-${store.id}`}>
                  (4.9/5)
                </span>
              </div>

              {/* Store Description */}
              {store.description && (
                <p className="text-sm text-muted-foreground line-clamp-2 mb-2" data-testid={`store-description-${store.id}`}>
                  {store.description}
                </p>
              )}

              {/* Store Info */}
              <div className="flex items-center justify-between">
                <div className="flex items-center text-xs text-muted-foreground">
                  <MapPin className="h-3 w-3 mr-1" />
                  <span>Verified • Bharat</span>
                </div>
                <Badge variant="secondary" className="text-xs" data-testid={`store-status-${store.id}`}>
                  Active
                </Badge>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}