import {
    Card,
    CardActionArea,
    CardContent,
    Paper,
    Rating,
    Typography,
    useTheme
} from "@mui/material";
import RatingType from "../../components/Rating";
import { useTranslation } from 'react-i18next';

export default function RatingCard(ratingType: RatingType) {
    const { t } = useTranslation();
    const theme = useTheme(); // Zugriff auf Light/Dark-Mode

    const handleClick = () => {
    };

    return (
        <Paper
            elevation={4}
            sx={{
                backgroundColor: theme.palette.background.paper,
                color: theme.palette.text.primary,
            }}
        >
            <Card
                sx={{
                    backgroundColor: theme.palette.background.paper,
                }}
            >
                <CardActionArea onClick={handleClick}>
                    <CardContent>
                        <Typography
                            gutterBottom
                            variant="h6"
                            component="div"
                            sx={{ color: theme.palette.text.primary }}
                        >
                            {t('ratingFrom')} {new Date(ratingType.timestamp).toLocaleDateString('de-DE')}
                        </Typography>

                        <Rating
                            name="half-rating"
                            readOnly
                            defaultValue={ratingType.rating / 2}
                            precision={0.01}
                        />

                        <Typography
                            variant="body2"
                            sx={{ color: theme.palette.text.secondary, mt: 1 }}
                        >
                            {ratingType.content}
                        </Typography>
                    </CardContent>
                </CardActionArea>
            </Card>
        </Paper>
    );
}
