import React from 'react';
import { Card, Box, Skeleton, Grid } from '@mui/material';

export const ProductCardSkeleton: React.FC = () => {
  return (
    <Card sx={{ border: '1px solid #E6DFD5', boxShadow: 'none' }}>
      <Skeleton variant="rectangular" height={260} animation="wave" />
      <Box sx={{ p: 2 }}>
        <Skeleton variant="text" width="60%" height={20} animation="wave" />
        <Skeleton variant="text" width="90%" height={28} sx={{ my: 1 }} animation="wave" />
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
          <Skeleton variant="text" width="30%" height={24} animation="wave" />
          <Skeleton variant="circular" width={32} height={32} animation="wave" />
        </Box>
      </Box>
    </Card>
  );
};

export const BlogCardSkeleton: React.FC = () => {
  return (
    <Card sx={{ border: '1px solid #E6DFD5', boxShadow: 'none' }}>
      <Skeleton variant="rectangular" height={200} animation="wave" />
      <Box sx={{ p: 3 }}>
        <Skeleton variant="text" width="40%" height={16} animation="wave" />
        <Skeleton variant="text" width="95%" height={32} sx={{ my: 1 }} animation="wave" />
        <Skeleton variant="text" width="80%" height={20} animation="wave" />
        <Box sx={{ display: 'flex', alignItems: 'center', mt: 3, gap: 1.5 }}>
          <Skeleton variant="circular" width={36} height={36} animation="wave" />
          <Box sx={{ flex: 1 }}>
            <Skeleton variant="text" width="50%" height={16} animation="wave" />
            <Skeleton variant="text" width="30%" height={14} animation="wave" />
          </Box>
        </Box>
      </Box>
    </Card>
  );
};

export const ProductDetailSkeleton: React.FC = () => {
  return (
    <Grid container spacing={4} sx={{ py: 4 }}>
      <Grid size={{ xs: 12, md: 6 }}>
        <Skeleton variant="rectangular" height={450} sx={{ borderRadius: 2 }} animation="wave" />
        <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
          <Skeleton variant="rectangular" width={80} height={80} sx={{ borderRadius: 1 }} animation="wave" />
          <Skeleton variant="rectangular" width={80} height={80} sx={{ borderRadius: 1 }} animation="wave" />
          <Skeleton variant="rectangular" width={80} height={80} sx={{ borderRadius: 1 }} animation="wave" />
        </Box>
      </Grid>
      <Grid size={{ xs: 12, md: 6 }}>
        <Skeleton variant="text" width="30%" height={20} animation="wave" />
        <Skeleton variant="text" width="85%" height={48} sx={{ my: 1 }} animation="wave" />
        <Skeleton variant="text" width="95%" height={24} animation="wave" />
        <Skeleton variant="text" width="90%" height={24} animation="wave" />
        <Skeleton variant="rectangular" height={60} sx={{ my: 3, borderRadius: 1 }} animation="wave" />
        <Box sx={{ display: 'flex', gap: 2, mt: 3 }}>
          <Skeleton variant="rectangular" width="60%" height={48} sx={{ borderRadius: 6 }} animation="wave" />
          <Skeleton variant="rectangular" width="35%" height={48} sx={{ borderRadius: 6 }} animation="wave" />
        </Box>
      </Grid>
    </Grid>
  );
};